import { Component , OnInit } from "@angular/core" ; import { IFormGroup , Options } from '@rxweb/reactive-form-validators' ; import { User } from '../models/user' ; import { Skill } from '../models/skill' ; import { FormBuilder } from '@angular/forms' ; @ Component ( { selector : 'strongly-typed' , templateUrl : './strongly-typed-reactive-form.component.html' } ) export class StronglyTypedReactiveFormComponent implements OnInit { serverData = { firstName : 'John' , address : { countryName : "India" } , dob : "10/15/2020" , skills : [ { name : 'Angular' } ] } ; user : User ; constructor ( private formBuilder ) { } ngOnInit ( ) { this . user = ( this . formBuilder . group ( User , < Options > { data : this . serverData } ) as IFormGroup < User > ) . modelInstance ; } addSkill ( ) { this . user . skills . push ( new Skill ( ) ) ; } removeSkill ( index ) { this . user . skills . splice ( index , 1 ) ; } submit ( ) { console . log ( this . user ) ; console . log ( this . user . formGroup . toFormData ( ) ) ; } }