Getting this weird issue in my template please take a look if this can be resolved. I tried some answers related to this but i got nothing.
ngOnInit(): void {
this.signUpForm = new FormGroup({
'userName': new FormControl(null, Validators.required),
'email': new FormControl(null, [Validators.required, Validators.email]),
'gender': new FormControl('male'),
'hobbies': new FormArray([])
})
}
onAddHobby() {
const control = new FormControl(null, Validators.required);
(<FormArray>this.signUpForm.get('hobbies')).push(control);
} <div formArrayName="hobbies">
<h4>your hobbies</h4>
<button class="btn btn-default" (click)="onAddHobby()">add hobby</button>
<div
class="form-group"
*ngFor="
let hobbyControl of signUpForm.get('hobbies').controls;
let i = index
"
>
<input type="text" class="form-control" [formControlName]="i" />
</div>
</div>>Solution :
This is happening because the get() method returns an AbstractControl, which doesn’t have the controls property.
To solve it you can add a getter in the class to cast the control to a FormArray
get hobbies(): FormArray {
return this.signUpForm.get('hobbies') as FormArray;
}
And then use the getter in the template instead as:
<div
class="form-group"
*ngFor="
let hobbyControl of hobbies.controls;
let i = index
"
>
Cheers