I have an angular form which contains a form group array that I want to pass to a child component.
this.myForm = this.fb.group({
name: [''],
email: [''],
installations: this.fb.array([]),
...
and my initialiser creates the first item in the array:
get installations(){
return this.myForm.get('installations') as FormArray;
}
addInstallation(){
this.installations.push(
this.fb.group({
item1: [''],
item2: ['']
}
and I iterate of the installations in my html
<mat-expansion-panel *ngFor="let inst of installations.controls; let i = index">
<mat-expansion-panel-header>
<mat-panel-title>Installation {{ i + 1 }}</mat-panel-title>
</mat-expansion-panel-header>
<app-installation-details [formGroupName]="i"></app-installation-details>
</mat-expansion-panel>
so I want my app-installation-details child component to pick up the individual installation:
public installationDetailsFormGroup: FormGroup;
constructor(private controlContainer: ControlContainer, private fb: FormBuilder) { }
ngOnInit(): void {
this.installationDetailsFormGroup = <FormGroup>this.controlContainer.control;
}
but the console always complains that:
Cannot find control with name: '0'
and it says the same thing if I change the item passed:
<app-installation-details [formGroupName]="inst"></app-installation-details>
errors with
Cannot find control with name: '[object Object]'