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

0dxa2lsx  于 2022-12-14  发布在  TypeScript
关注(0)|答案(1)|浏览(93)

我有一个Angular 15应用程序(请参阅Stackblitz上的源代码),它使用React式表单和ControlValueAccessor模式来创建包含子表单组的父表单。当我添加表单组并在父html模板中将其注解为FormGroup时,数据不会传递给子表单。当我将其注解为FormControl时,它会正确地传递和访问子表单的数据,但我得到了错误
错误错误:控件.registerOnChange不是函数
此外,如果将FormGroup注解为FormControl,则无法访问其中的各个控件。
在程式码范例中,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',
      }),
    });
}
h7appiyu

h7appiyu1#

在父组件中,您正在将表单组传递给表单组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',
      }),
    });
  }

快乐编码!

相关问题