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

Question

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

错误错误：control.registerOnChange 不是 function

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

在代码示例中， childGroupForm2接收传递的值，但childGroupForm没有。

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

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

编辑最少的代码：

// parent.component.html

<form [formGroup]="parentForm">
   <child-group [formGroup]="childGroupForm"> </child-group>
   <child-group [formControl]="childGroupForm2"> </child-group>
</form>  



// parent.component.ts

get childGroupForm(): FormGroup {
    return this.parentForm.get('childGroupForm') as FormGroup;
}

get childGroupForm2(): FormControl {
    return this.parentForm.get('childGroupForm2') as FormControl;
}

ngOnInit() {
    this.parentForm = this.fb.group({
      childGroupForm: this.fb.group({
        elementInput: 'Test1',
        elementsSelectionInput: 'Test2',
      }),
      childGroupForm2: this.fb.group({
        elementInput: 'Test3',
        elementsSelectionInput: 'Test4',
      }),
    });
}

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

编码愉快！

Answer 2

您的子组是自定义表单控件（实现 ControlValueAccessor 的组件）。 自定义表单控件是通过 FormControl 而非 FormGroup 来“馈送”的。

所以你在父母的表格应该是

this.parentForm = this.fb.group({
  name: 'Test0',
  childGroupForm: this.fb.control({ //<--are FormControl that "store" an object
    elementInput: 'Test1',
    elementsSelectionInput: 'Test2',
  }),
  childGroupForm2: this.fb.control({ //<--are FormControl that "store" an object
    elementInput: 'Test3',
    elementsSelectionInput: 'Test4',
  }),
}); 

你父母喜欢

<form [formGroup]="parentForm">
  <child-group formControlName="childGroupForm"></child-group>
  <child-group formControlName="childGroupForm2"></child-group>
</form>

个人意见：应该使用自定义表单控件来使一些“更复杂”的管理一系列输入。 如果你像这样使用viewProvider ，你可以使用一个简单的组件来获得相同的东西

一个带有 formGroup 的例子，你可以看到stackblitz

//child
@Component({
  selector: 'hello',
  template: `<h1>Hello </h1>
  <div [formGroupName]="group">
    <input formControlName="elementInput"/>
    <input formControlName="elementsSelectionInput"/>
  </div>      `,
  styles: [`h1 { font-family: Lato; }`],
  viewProviders:[{ provide: ControlContainer, useExisting: FormGroupDirective }]
})
export class HelloComponent  {
  @Input() group: string;
  
  constructor(){}
}

然后家长使用

  <form [formGroup]="form">
     <hello [group]="'childGroupForm'"  > </hello>
  </form>

  form=new FormGroup({
    childGroupForm:new FormGroup({
      elementInput:new FormControl(),
      elementsSelectionInput:new FormControl()
  
    })
  })

注意：在示例中我使用了新的 Form 和新的 FormGroup 而不是 formBuilder，但它们是一样的