My Angular application (view source code on Stackblitz) is running Angular 15, and it utilizes reactive forms along with a ControlValueAccessor pattern to construct a parent form containing child form groups. However, I am encountering an issue where the data is not being passed to the child when I designate it as a FormGroup in the parent's HTML template. On the other hand, if I label it as a FormControl, the data passes correctly and the child form can access it, but this approach results in an error:
ERROR Error: control.registerOnChange is not a function
Additionally, when annotating it as a FormControl, I am unable to retrieve the individual controls within the FormGroup.
In the provided code example, childGroupForm2 successfully receives the passed values, while childGroupForm does not.
My ideal solution would be to specify the FormGroup as a FormGroup and successfully pass the values from the parent component to the child.
Does anyone have insights into why this method is unsuccessful with FormGroups yet functional with FormControls?
Below is an updated version of the code for brevity:
// 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',
}),
});
}