CODEWITHSUNDEEP
javascripthtmlangulartypescript
Saif Warsi
Saif Warsi

Reputation: 338

Property 'controls' does not exist on type 'AbstractControl'.ngtsc(2339)

enter image description hereGetting 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>

Upvotes: 1

Views: 719

Answers (2)

Zerotwelve
Zerotwelve

Reputation: 2361

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

Upvotes: 1

akotech
akotech

Reputation: 2284

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

Upvotes: 0

Related Questions