I have a FormGroup that contains a SubFormGroup:
sub formGroup initialize:
this.fg=new FormGroup({
name: new FormControl(),
abcFg: new FormGroup({
aaa: new FormControl(),
bbb: new FormControl()
})
});
In my main component, I have an ABCComponent:
@Component({
selector: 'mainComponent',
styles: [],
providers: [],
template: `
<div *ngIf="fg">
<form [formGroup]="fg">
<abcComponent></abcComponent>
</form>
</div>
`
I want to pass the sub FormGroup (abc) to the ABCComponent as a parameter(input).
ABCComponent:
@Component({
selector: 'abcComponent',
styles: [],
providers: [],
template: `
<div *ngIf="abcFg">
<form [formGroup]="abcFg">
<input type="text" formControlName="aaa" />
<input type="text" formControlName="bbb" />
</form>
</div>
`
export class AbcComponent{
@input() public abcFg:FormGroup;
}
I have attempted to do this:
<abcComponent [abcFg]="fg.controls[abcFg"]"></abcComponent>
However, it is not working... How can I fix it? Thank you!