Создать форму Поле ввода в соответствии с выбранным номером из выпадающего

Question

Я написал Angular код TypeScript для отображения профиля сотрудника. В этом есть выпадающее поле для выбора количества детей. Я могу показать количество детей, предварительно заполненных из бэкэнда. Но я не могу показать поля, которые принимают имя входа и дату рождения.

Например, я могу получить число детей как 2 из бэкэнда. Но поля (имя и дата рождения, которые указываются только при выборе количества детей) не отображаются предварительно заполненными.

Ниже показано, что я получаю предварительно заполненным из серверной части со значением как два. введите описание изображения здесь

Изображение ниже - то, что я хочу, но оно работает, только если снова выбрать количество детей. введите описание изображения здесь

formGroup: FormGroup;
formArray: FormArray;
selected;

numberOfChildren //coming from the backend 

constructor(
  private fb: FormBuilder,
) {
  this.formGroup = this.fb.group({
    childrenData: this.fb.array([])
  });
}


getFormControls(): AbstractControl[] {
  return (this.formGroup.get("childrenData") as FormArray).controls;
}

addControlsInFormArray() {
  if (this.formArray) {
    while (this.formArray.length !== 0) {
      this.formArray.removeAt(0);
    }
  }
  for (var i = 0; i < this.selected; i++) {
    this.formArray = this.formGroup.get("childrenData") as FormArray;
    this.formArray.push(this.createItem());
  }
}

createItem(): FormGroup {
  return this.fb.group({
    name: new FormControl(""),
    dateOfBirth: new FormControl("")
  });
}

<form>
  <div class="form-group">
    <label>Number of Children: </label>
    <mat-form-field class="formfield" appearance="outline">
      <mat-select (selectionChange)="addControlsInFormArray()" formControlName="numberOfChildren" [(value)]="selected">
        <mat-option>None</mat-option>
        <mat-option [value]="0">0</mat-option>
        <mat-option [value]="1">1</mat-option>
        <mat-option [value]="2">2</mat-option>
        <mat-option [value]="3">3</mat-option>
      </mat-select>
    </mat-form-field>
  </div>

  <div *ngIf="bool" class="save-btn">
    <button type="submit" mat-raised-button>
      Save
    </button>
  </div>
</form>



<-- this it the from which needs to be pre-filled from the backend, if number of children is 2 then 4 fields with prefilled data-->
  <form [formGroup]="formGroup" (ngSubmit)="saveEmployeePersonalInfo()">
    <div formArrayName="childrenData" *ngFor="let item of getFormControls(); let i = index">
      <div [formGroupName]="i">
        <div class="form-group">
          <label> Name of Child {{ i + 1 }}: </label>
          <mat-form-field appearance="outline" class="formfield">
            <input matInput type="text" placeholder="Name of Child" formControlName="name" id="question" />
          </mat-form-field>
        </div>

        <div class="form-group">
          <label>Date of Birth of Child {{ i + 1 }}: </label>
          <mat-form-field appearance="outline">
            <input matInput [matDatepicker]="picker" formControlName="dateOfBirth" placeholder="Choose a date" readonly (click)="picker.open()" />
            <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
            <mat-datepicker #picker></mat-datepicker>
          </mat-form-field>
        </div>
      </div>
    </div>

    <button type="submit" mat-raised-button>
    Save1
  </button>
  </form>