Angular 反应式表单：使用 FormArray 并调整 FormControls 导致错误 There is no form control element for path

Question

我正在创建一个可过滤的 table。第一列包含 select 行的复选框，最终用户可以使用 select 离子执行一些操作。

关于过滤器，我正在做：

public resetFormRows(items: any[]) {
    this.formGroup.removeControl('rows');
    const newRows = items.map(_ => new FormControl(false));
    const newFormArray = new FormArray(newRows);
    this.formGroup.addControl('rows', newFormArray);
}

筛选 table 后，我可以 console.log 控件并看到 FormArray 包含新的 FormControl。但是，当我 select 移动（即更改行索引）的行的复选框时，显示以下错误：

ERROR Error: There is no FormControl instance attached to form control element with path: 'rows -> 1'

这是一个演示错误的 stackblitz： https://stackblitz.com/edit/angular-8-template-form-fzsyse?file=src%2Fapp%2Ftable.component.ts

要显示错误，请执行以下操作：

Select 过滤器复选框：“有所有者？”
Select“订书机”复选框

我有几个问题：

为什么我会收到此错误，为什么我的 console.log 显示了 FormControl 但错误提示我没有？
错误堆栈跟踪没有指向我的代码库中的任何特定内容。那么，人们通常如何调试这些问题？

Answer 1

不使用 formControlName 指令，而是尝试使用 thread:

中提到的 formControl 独立指令

试试这个：

    <tr *ngFor="let item of filteredData$ | async; index as i">
        <td>
            <label><input type="checkbox" checkBoxDirective [formControl]="myForm.get('rows').controls[i]" /></label>
        </td>
        <td>
            {{ item.name }}     
        </td> 
    </tr>

Forked Example

Answer 2

您的表单数组包含表单控件，但它们没有任何名称，因此您无法使用 formControlName

访问它们

解决这个问题：

在 ts:

  get formArray() {
      return this.myForm.controls.rows as FormArray;
  }

在html

<input type="checkbox" checkBoxDirective [formControl]="formArray.controls[i]" />

工作 stackblitz link :

https://stackblitz.com/edit/angular-8-template-form-8xnmdp?file=src%2Fapp%2Ftable.component.html

Angular 反应式表单：使用 FormArray 并调整 FormControls 导致错误 There is no form control element for path

Angular Reactive Form: Using a FormArray and adjusting the FormControls leads to Error There is no form control element for path

angular

angular-reactive-forms