Показать FormArray в другом FormArray в Angular6

Question

Я пытаюсь отобразить массив форм внутри другого formarray, но он выдает ошибку. Не удается прочитать свойство 'controls' из неопределенного

вот мой код

addInventoryFormGroup() {
    this.addInventoryForm = this.fb.group({
        addInventoryFieldsList: this.fb.array([this.buildAddInventoryFields()]),
    });
}

buildAddInventoryFields(): FormGroup {
    return this.fb.group({
        buildTableFields: this.fb.array([this.buildAddInventoryTableFields()]),
        quantity: '',
        section: '',
        row: '',
    })
}

buildAddInventoryTableFields(): FormGroup {
    return this.fb.group({
        unitCost: '',
        faceValue: '',
    })
}

get addInventoryFieldsList(): FormArray {
    return <FormArray>this.addInventoryForm.get('addInventoryFieldsList');
}

здесьмой HTML-код для него

<form [formGroup]="addInventoryForm">
     <div class="reactive-form" formArrayName="addInventoryFieldsList" *ngFor="let address of addInventoryFieldsList.controls; let i = index;">
          <div [formGroupName]="i">
               <div formArrayName="buildTableFields" *ngFor="let fields of addInventoryFieldsList.controls.buildTableFields.controls; let x = index;">
                    <span [formGroupName]="x">ABC</span>
               </div>   
          </div>
     </div>
</form>   

Пожалуйста, помогите мне исправить эту ошибку

Answer 1

Так как я не вижу, вы объявили addInventoryFieldsList я подозреваю, что это ваша проблема.

Вы должны написать addInventoryForm.controls.addInventoryFieldsList для доступа addInventoryFieldsList Элемент управления FormArray.

У вас должно работать следующее:

<form [formGroup]="addInventoryForm">
    <div class="reactive-form" formArrayName="addInventoryFieldsList" *ngFor="let address of addInventoryForm.controls.addInventoryFieldsList.controls; let i = index;">
        <div [formGroupName]="i">
            <div formArrayName="buildTableFields" *ngFor="let fields of address.controls.buildTableFields.controls; let x = index;">
                <span [formGroupName]="x">ABC</span>
            </div>
        </div>
    </div>
</form>

Также обратите внимание, что я использую address.controls.buildTableFields.controls, чтобы перебрать вложенные элементы управления

Обновление:

Как оказалось, вы определили метод getInventoryFieldsList. Так вот обновленный шаблон:

<form [formGroup]="addInventoryForm">
    <div class="reactive-form" formArrayName="addInventoryFieldsList" *ngFor="let address of addInventoryFieldsList.controls; let i = index;">
        <div [formGroupName]="i">
            <div formArrayName="buildTableFields" *ngFor="let fields of address.controls.buildTableFields.controls; let x = index;">
                <span [formGroupName]="x">ABC</span>
            </div>
        </div>
    </div>
</form>

Ng-run Пример

Answer 2

Этот пост может помочь вам ... https://alligator.io/angular/reactive-forms-formarray-dynamic-fields/ Обязательно загрузите форму перед ее использованием

ngOnInit() {
   this.addInventoryForm = this.fb.group({
    addInventoryFieldsList: this.fb.array([this.buildAddInventoryFields()]),
   });
}... follow with your methods

HTML

   <form [formGroup]="addInventoryForm">
 <div class="reactive-form" formArrayName="addInventoryFieldsList" *ngFor="let address of addInventoryForm.get('addInventoryFieldsList').controls; let i = index;">
      <div [formGroupName]="i">
           <div formArrayName="buildTableFields" *ngFor="let fields of addInventoryForm.get('addInventoryFieldsList').controls; let x = index;">
                <span [formGroupName]="x">ABC</span>
           </div>   
      </div>
 </div>

Answer 3

Пожалуйста, проверьте addInventoryFieldsList, который может не быть объявленной переменной в вашем файле TS.