Angular FormArray: невозможно прочитать свойство 'pu sh' из неопределенного - PullRequest
Новая
       3

Angular FormArray: невозможно прочитать свойство 'pu sh' из неопределенного

0 голосов
/ 07 февраля 2020

У меня есть форма, распределенная по 3 подкомпонентам. Есть 3 группы форм. В 3-й группе находится FormArray. Эта форма будет содержать FormControls, которые просто true / false. Один для каждого результата, возвращенного из вызова API. Это работало очень хорошо, когда эта форма была своей отдельной вещью полностью от основной формы. Попытка интегрировать его в единую форму с группами привела к следующей ошибке: 

Cannot read property 'push' of undefined

Изменение способа, которым он пытается выполнить pu sh для массива формы, приводит к тому, что "Pu sh не существует для типа AbstractControl "ошибка. Вот код .ts: 

public wizard = this.fb.group({
  decisionMaker: this.fb.group({}),
  schedule: this.fb.group({}),
  step2: this.fb.group({
    amount: [0, Validators.required],
    step2DataArray: new FormArray([]),
  }),
});

public get step2DataArray(): AbstractControl[] {
  return (this.wizard.get('step2DataArray') as FormArray).controls;
}

private populateFormArray(): void {
  console.log(this.wizard);
  this.step2DataBehavior.getValue().forEach(() => {
    const control = new FormControl(false);
    (this.wizard.controls.step2DataArray as FormArray).push(control);
  });
}

релевантный html

 <ng-container [formGroup]="controlContainer.control" class="px-3 py-3">
    <table mat-table [dataSource]="step2DataBehavior | async" class="w-100 mat-elevation-z8">
    <ng-container matColumnDef="inputs">
      <mat-header-cell *matHeaderCellDef></mat-header-cell>
      <mat-cell *matCellDef="let element; let i = index" formArrayName="step2DataArray">
        <mat-checkbox formControlName="step2DataArray[i]" [value]="element.amount"></mat-checkbox>
      </mat-cell>
    </ng-container>
  </table>
</ng-container>

Я знаю, что я неправильно ссылаюсь на часть формы, чтобы сделать пу sh, или publi c get, который устанавливает их как абстрактные элементы управления, как-то не так. Любой совет? Я не могу найти в документации ничего конкретно об этом, и другие ответы на этот вопрос не сработали.

1 Ответ

1 голос
/ 07 февраля 2020

Поскольку FormArray step2DataArray вложен во внутреннюю группу FormGroup (step2), необходимо указать полный путь к массиву. 

public get step2DataArray(): AbstractControl[] {
  return (this.wizard.get(['step2', 'step2DataArray']) as FormArray).controls;
}
...