I have a form where I need to input company names and save them in a list of strings in the database. However, I am facing an issue where the value of the company in the form array is always empty.
<button (click)="addNewCompany()">Add New Company</button><br><br>
<form [formGroup]="myForm">
<div formArrayName="companies">
<div *ngFor="let comp of getForm(); let i=index>
<fieldset>
<legend>
<h3>COMPANY {{i+1}}: </h3>
</legend>
<label>Company Name: </label>
<input formControlName="comp" /><span><button (click)="deleteCompany(i)">Delete Company</button></span>
</fieldset>
</div>
</div><br>
</form>
export class AppComponent {
myForm: FormGroup;
constructor(private fb: FormBuilder) {
this.myForm = this.fb.group({
companies: this.fb.array([])
});
}
getForm(): any {
return this.myForm.get("companies")["controls"];
}
addNewCompany() {
const control = <FormArray>this.myForm.get("companies");
control.push(this.fb.control(''));
}
deleteCompany(index) {
let control = <FormArray>this.myForm.controls.companies;
control.removeAt(index);
}
}