具有嵌套FormGroup的组件中的表单控件的Angular-无值访问器

Question

我的父组件使用FormGroup，我希望子组件向其父组件报告值更改。我试图通过在子组件中使用NG_VALUE_ACCESSOR来解决这个问题，以允许它表现为表单字段。正如我所理解的，应该使用以下4个功能

writeValue(value) {
this.value = value;
}
registerOnChange(fn: any) {
this.onChange = fn;
}
registerOnTouched(fn: any) {
this.onTouch = fn;
}
setDisabledState?(isDisabled: boolean): void {
this.isDisabled = isDisabled;
}

以便表现为表单字段。这是我目前的非工作解决方案：

https://stackblitz.com/edit/angular-ivy-tpneik?file=src%2Fapp%2Fapp.component.ts

当前错误显示：

错误：路径为'ok->的表单控件没有值访问器；已检查

目标是拥有一个子组件(可能还有更多(，该子组件可以向父组件中的父窗体正确报告其值更改。我该如何处理这个问题？

Answer 1

您的子窗体中有一个单独的窗体，而且您正在那里重建子窗体。只需将构建的嵌套表单组传递给孩子，就可以开始了。父母会知道孩子的情况。

将表单组作为变量向下传递：

<div formGroupName="child">
<app-form [formGroupChild]="formGroupChild" [myArray]="myArray"></app-form>
</div>

在child中，获取数组和formgroup，在div上附加一个[formgroup]，然后施展魔法！

<div [formGroup]="formGroupChild">
<div class="container">
<div *ngFor="let category of myArray" [formGroupName]="category.id">
<input type="checkbox" formControlName="isChecked">
<div [style.color]="category.textColor">
{{ category.name }}
</div>
</div>
</div>
</div>

此处不需要controlvalue访问器：(

您的分叉STACKBLITZ