我有一个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',
}),
});
}
1条答案
按热度按时间h7appiyu1#
在父组件中,您正在将表单组传递给表单组aka childGroupForm应该是表单(而不是组):
快乐编码!