Obteniendo este problema extraño en mi plantilla, eche un vistazo si se puede resolver. Intenté algunas respuestas relacionadas con esto, pero no obtuve nada.
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>La forma más sencilla de resolver:
let hobbyControl of $any(signUpForm.get('hobbies')).controls; El compilador se queja porque signUpForm.get('hobbies') devuelve un abstractControl (que no tiene controles), pero como sabe que se trata de un FormArray , puede usar $any() https://angular.io/guide /template-expression-operators#any-type-cast-function
Esto sucede porque el método get() devuelve un AbstractControl , que no tiene la propiedad de controles.
Para resolverlo, puede agregar un captador en la clase para convertir el control en un FormArray
get hobbies(): FormArray { return this.signUpForm.get('hobbies') as FormArray; }Y luego use el captador en la plantilla en su lugar como:
<div class="form-group" *ngFor=" let hobbyControl of hobbies.controls; let i = index " >Salud