ngModel нельзя использовать для формирования массива

Question

Я создаю группу форм с массивом форм в ней и с группой форм в ней. Я хочу отображать данные из API с помощью ngModel. Есть ли другой способ отображения данных на входе?

In HTML:

  <div formArrayName="manager_customer" >
    <div *ngFor=" let x of formArray.controls; index as i; trackBy: trackByIdx " 
     [formGroupName]="i" ngModelGroup="address" #address="ngModelGroup"
      class="container" fxLayout="row" fxLayout.xs="column" fxlayoutWrap fxLayoutGap="1%"
      fxLayoutAlign="center" style="align-items: baseline;">

      <div class="" *ngIf=" i === 0 ">
        <button mat-mini-fab class="btn-addMore" type="button" (click)="addManager_customer()">
          <mat-icon>add</mat-icon>
        </button>
      </div>

      <div fxFlex class="" *ngIf=" i > 0 ">
        <button mat-mini-fab class="btn-removeMore" type="button"(click)="removeManager_customer(i)">
          <mat-icon >remove</mat-icon>
        </button>
      </div>

      <div fxFlex="45%">
        <mat-form-field appearance="outline" class="full-width" hideRequiredMarker>
          <mat-label>Manager Customer Name</mat-label>
          <input type="text" matInput placeholder="Enter Name..." 
          formControlName="name_managerCustomer"
           [(ngModel)]="name_managerCustomer" required>
          <mat-icon matSuffix>perm_identity</mat-icon>
        </mat-form-field>
      </div>

      <div fxFlex="50%" class="div-header">
        <mat-form-field appearance="outline" class="full-width" hideRequiredMarker>
          <mat-label>Manager Customer Phone</mat-label>
          <input type="number" matInput placeholder="Enter Phone..." 
          [(ngModel)]="showManagerCustomer.phone_managerCustomer"
          formControlName="phone_managerCustomer" required>
          <mat-icon matSuffix>call</mat-icon>
        </mat-form-field>
        
      </div>
    </div>
  </div>

в ts:

addFormCustomer(){

this.formCustomer = this.formBuilder.group({
  image_customer: new FormControl(null),
  name_customer: new FormControl(null, [Validators.required, Validators.maxLength(50)]),
  nature_customer: new FormControl(null, [Validators.required, Validators.maxLength(50)]),
  phone_customer: new FormControl(null, [Validators.required, Validators.maxLength(11)]),
  manager_customer: this.formBuilder.array([]),
  company: new FormControl(null, [Validators.required, Validators.maxLength(50)]),
  branch: new FormControl(null, [Validators.required, Validators.maxLength(50)]),
  email_customer: new FormControl(null, [Validators.pattern('/\S+@\S+\.\S+/')]),

  address_customer: new FormGroup({
    country: new FormControl(null),
    city: new FormControl(null),
    title: new FormControl(null)
  }),

  notes_customer: new FormControl(null),
  createdAt_customer: new FormControl(null),
  updateAt_customer: new FormControl(null),

})}


get formArray(): any {

return this.formCustomer.get('manager_customer') as FormArray
}

// create form array
addManager_customer() {

//determine length form array
if (this.formArray.length === 3) {
  console.log('stop Push')
  return;
}
this.formArray.push(
  this.formBuilder.group({
    name_managerCustomer: new FormControl(null, [Validators.required]),
    phone_managerCustomer: new FormControl(null, [Validators.required, Validators.maxLength(11)])

  })
)
}