Cannot read property 'setParent' of undefined

i am using angular 6 reactive form and i have in a child component a table:

<div formArrayName="_server">
<table id="_server" class="table table-striped table-bordered">
<thead>
<tr>
<th>Host name</th>
<th>IP</th>
<th>Domain</th>
<th>OS</th>
<th>Action</th>
</tr>
</thead>
<tbody>

<tr *ngFor="let server of serverForms.controls; let i=index" [formGroupName]="i">
<td>
<input formControlName="HostName" class="form-control" type="text" />
</td>
<td>
<input formControlName="IPAddress" class="form-control" type="text" />
</td>
<td>
<input formControlName="Domain" class="form-control" type="text" />
</td>
<td>
<input formControlName="OS" class="form-control" type="text" />
</td>
<td class="buttonCenter">
<button mat-raised-button color="primary" class="deleteFieldButton" (click)="deleteServer(i)" type="button">delete</button>
</td>
</tr>
</tbody>
<button mat-raised-button color="primary" class="addFieldButton" (click)="addServer()" type="button">Add new server</button>

</table>



i am passing from the parent the form to the child.

you can see in the ts file:

childForm;
constructor(private parentF: FormGroupDirective) { }

ngOnInit() {

this.childForm = this.parentF.form;
this.childForm.get('_server') as FormArray;

}

get serverForms() {
return this.childForm.get('_server') as FormArray
}

addServer() {

const server = this.childForm.addControl('_server', new FormGroup({
HostName: new FormControl([]),
IPAddress: new FormControl([]),
Domain: new FormControl([]),
OS: new FormControl([]),

}))

this.serverForms.push(server);
}

deleteServer(i) {
this.serverForms.removeAt(i)
}


The deleteServer method is working great but the addServer() not working - i am getting error: Cannot read property 'setParent' of undefined.

Please advice! Thanks!

Continue reading...