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  (click)="onAddHobby()">add hobby</button>
    <div
      
      *ngFor="
        let hobbyControl of signUpForm.get('hobbies').controls;
        let i = index
      "
    >
      <input type="text"  [formControlName]="i" />
    </div>
  </div>

CodePudding user response：

The simplest way to solve:

let hobbyControl of $any(signUpForm.get('hobbies')).controls;

The compiler is complaining because signUpForm.get('hobbies') returns an abstractControl (which doesn't have controls), but since you know that this is a FormArray you can use $any() https://angular.io/guide/template-expression-operators#any-type-cast-function

CodePudding user response：

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 
  
  *ngFor="
    let hobbyControl of hobbies.controls;
    let i = index
  "
>

Cheers