I am working on big form, so i plan to truncate the form into multiple child components which helps for easy integration and maitainbility. Using form builder i am trying to
You need to use Input()
and pass that sub-FormGroup
to the child. I changed it a bit here and made the group named useraccount
instead of useracc
to separate the control from the group:
Your sub group for useraccount in your parent:
...
useraccount: this.formBuilder.group({
useracc: '',
})
...
So, the related child component tag in the parent should look something like this:
<app-useracc [useraccount]="formDetail.controls.useraccount"></app-useracc>
And then add input in your child component:
@Input() useraccount: FormGroup;
and template could look like this:
<div [formGroup]="useraccount">
<input formControlName="useracc">
</div>
Working sample