angular - Angular Reactive Form：使用 FormArray 并调整 FormControls 会导致错误路径没有表单控件元素

Question

我正在创建一个可过滤的表。第一列包含用于选择行的复选框，最终用户可以对选择执行一些操作。

在过滤器上，我正在做：

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);
}

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

ERROR 错误：没有 FormControl 实例附加到具有路径的表单控件元素：'rows -> 1'

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

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

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

我有几个问题：

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

标签： angularangular-reactive-forms

Answer 1

不要使用 formControlName 指令，而是尝试使用线程中提到的 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>

分叉示例