My code builds and runs perfectly in dev mode. When I build for production I get this error on this line:
<div *ngFor="let child of form.controls.emailsArray.controls; let i=index">
The form is built like this:
public form: FormGroup;
private control: FormArray;
private emailsModel = { emails: ['','','','','']} // the model, ready to hold the emails
private fb : FormBuilder;
constructor() {}
ngOnInit() {
this.fb = new FormBuilder;
this.form = this.fb.group({
emailsArray: this.fb.array([])
});
this.control = <FormArray>this.form.controls['emailsArray'];
this.patch();
}
private patch(): void {
// iterate the object model and extra values, binding them to the controls
this.emailsModel.emails.forEach((item) => {
this.control.push(this.patchValues(item));
})
}
private patchValues(item: string): AbstractControl {
return this.fb.group({
email: [item, Validators.compose([emailValidator])]
})
}
So how do I reference these child controls in html?
Note: similar to this question, except my error occurs in HTML, not typescript.
I'm not sure if this is good practice, but changing the HTML to this worked:
<div *ngFor="let child of form.controls.emailsArray['controls']; let i=index">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With