我正在创建一个可过滤的表。第一列包含用于选择行的复选框,最终用户可以对选择执行一些操作。
关于过滤器,我正在做:
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'
这是一个演示该错误的堆栈闪电战: https://stackblitz.com/edit/angular-8-template-form-fzsyse?file=src%2Fapp%2Ftable.component.ts
要显示错误,请执行以下操作:
我有几个问题:
答案 0 :(得分:2)
不要使用 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>
答案 1 :(得分:1)
您的表单数组包含表单控件,但它们没有任何名称,因此您无法使用 formControlName 访问它们
解决这个问题:
在 ts:
get formArray() {
return this.myForm.controls.rows as FormArray;
}
在 html 中
<input type="checkbox" checkBoxDirective [formControl]="formArray.controls[i]" />
工作stackblitz链接:
https://stackblitz.com/edit/angular-8-template-form-8xnmdp?file=src%2Fapp%2Ftable.component.html