Как я могу получить доступ к formArray из FormGroup в * ngFor в angular?

Question

Я использую вложенный FormControl с помощью FormArray. Моя форма такая:

      let form = new FormGroup({
   name: new FormControl(),
   email: new FormControl(),
   Addresses : new FormArray([
      new FormGroup({
         building: new FormControl(),
         society : new FormControl(),
      }),
      new FormGroup({
         building: new FormControl(),
         society : new FormControl(),
      })
      new FormGroup({
         building: new FormControl(),
         society : new FormControl(),
      })
   ])
})



addNewAddress() {
   let newAddress = new FormGroup({
      building: new FormControl(),
      society : new FormControl(),
   });
   this.form.get("addresses").push(newAddress)
}

И в шаблоне HTML

      <div *ngFor="let controlGroup of form.get('addresses').controls; let i=index">
   <ng-container [formGroup]="controlGroup">
     <input type="text" [formControlName]="building" />
     <input type="text" [formControlName]="society" />
   </ng-container>
</div>

** Но код выше возвращается Build Errorподобных элементов управления не существует в abstractControl. **

Итак, я конвертирую form.get('addresses') в использовании этого геттера Melthod.

      get addressArray() : FormArray {
    return form.get('addresses') as FormArray
}
//And use it in HTML like this

<div *ngFor="let controlGroup of addressArray.controls; let i=index">
   <ng-container [formGroup]="controlGroup">                             <== now here is build error
     <input type="text" [formControlName]="building" />
     <input type="text" [formControlName]="society" />
   </ng-container>
</div>

После этого преобразования. Ошибка новой сборки возникла, что controlGroup does not contain this methods : addControl, removeCotnrol and ...

Потому что addressArray.**controls** возвращает массив abstractControl вместо и [formGroup] директивные потребности FormControl.

Как я могу определить тип в *ngFor нравится :

      let (controlGroup: FormControl) of addressArray.controls; let i=index

Возможно это или нет?

Пожалуйста, помогите мне.

Answer 1

Вы можете использовать это с Type так же, как и addressArray.controls

Вот полный код:

      let form = new FormGroup({
   name: new FormControl(),
   email: new FormControl(),
   Addresses : new FormArray([
      new FormGroup({
         building: new FormControl(),
         society : new FormControl(),
      }),
      new FormGroup({
         building: new FormControl(),
         society : new FormControl(),
      })
      new FormGroup({
         building: new FormControl(),
         society : new FormControl(),
      })
   ])
})



addNewAddress() {
   let newAddress = new FormGroup({
      building: new FormControl(),
      society : new FormControl(),
   });
   this.form.get("addresses").push(newAddress)
}

get addressArray() : FormArray {
    return form.get('addresses') as FormArray
}

get addressControlsArray() : FormGroup[] {
    return this.addressArray.controls as FormGroup[]
}

В HTML

      <div *ngFor="let controlGroup of addressControlsArray; let i=index">
   <ng-container [formGroup]="controlGroup">
     <input type="text" [formControlName]="building" />
     <input type="text" [formControlName]="society" />
   </ng-container>
</div>