I'm encountering a strange problem. Check out the demo
.ts
import { Component } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
myForm: FormGroup;
constructor(private formBuilder: FormBuilder) {}
ngOnInit() {
this.myForm = this.formBuilder.group({
'options': this.formBuilder.array([this.createOption()])
});
}
createOption(): FormGroup {
return this.formBuilder.group({
'name': [null]
});
}
}
.html
<form novalidate [formGroup]="myForm" >
<div formArrayName="options" class="mt-3">
<div [formGroupName]="i" *ngFor="let option of myForm.get('options').value; let i = index;">
<input id="{{'name' + i}}" autocomplete="off" type="text" class="form-control" aria-label="Name"
formControlName="name">
</div>
</div>
</form>
I have a form with multiple options' name field. In the HTML, I loop through each option to display the fields. However, if I enter any character in the input field, it automatically loses focus.
If I change
*ngFor="let option of myForm.get('options').value; let i = index;"*ngFor="let option of myForm.get('options').controls; let i = index;"But when I try to deploy it to production and run
ng build --prod
An error is thrown:
Property 'controls' does not exist on type 'AbstractControl'.I need assistance with this problem.