父级未将表单值传递给 CVA 子表单组

Question

我有一个 Angular 15 应用程序（请参阅 Stackblitz 上的源代码），它使用反应式表单和 ControlValueAccessor 模式来创建包含子表单组的父表单。当我添加一个表单组并在父 html 模板中将其注释为 FormGroup 时，数据不会传递给子项。当我将其注释为 FormControl 时，它正在正确传递和访问子表单的数据，但出现错误

错误错误：control.registerOnChange 不是函数

此外，如果我将其注释为 FormControl，我将无法访问 FormGroup 内的各个控件。

在代码示例中childGroupForm2收到传递的值但是子组窗体才不是。

我的最佳解决方案是将 FormGroup 注释为 FormGroup 并将值从父组件传递给子组件。

有谁知道为什么这不适用于 FormGroups 但适用于 FormControl？

Answer 1

在您的父组件中，您将 formgroup 传递给 formgroup aka childGroupForm 应该是表单（而不是组）：

ngOnInit() {
    this.parentForm = this.fb.group({
      name: 'Test0',
      childGroupForm: this.fb.group({ //change this.fb.group to this.fb.control
        elementInput: 'Test1',
        elementsSelectionInput: 'Test2',
      }),
      childGroupForm2: this.fb.group({  //change this.fb.group to this.fb.control
        elementInput: 'Test3',
        elementsSelectionInput: 'Test4',
      }),
    });
  }

编码愉快！