Form Array

constructor(private formBuilder: FormBuilder){}

public profileForm: FormGroup = new FormGroup({});

ngOnInit() {
    this.profileForm = this.formBuilder.group({
      userName: ['', Validation.required],
      children: this.formBuilder.array([])
    });
}

get children() : FormArray {
  return this.profileForm.get("children") as FormArray
}

newChild(): FormGroup {
   return this.fb.group({
     name: '',
     age: 0,
   })
}

addChild() {
   this.children.push(this.newChild());
}

removeChild(i:number) {
  this.children.removeAt(i);
}

onSubmit() {
   console.log(this.profileForm.value);
 }

<form [formGroup]="profileForm" (ngSubmit)="onSubmit()">
 
  <p>
    <label for="userName">Name </label>
    <input type="text" id="userName" name="userName" formControlName="userName">
  </p>

  <div formArrayName="children">
  <div *ngFor="let child of children().controls; let i=index">
      <div [formGroupName]="i">
        {{i}}
        Child name: <input type="text" formControlName="name">
        Age: <input type="number" formControlName="age">
 
        <button (click)="removeChild(i)">Remove</button>
      </div>
  </div>
</div>
 
 <p>
    <button type="submit">Submit</button>
  </p>
 
</form>

<p>
  <button type="button" (click)="addChild()">Add</button>
</p>
 
{{this.profileForm.value | json}}