CODEWITHSUNDEEP
angularangular-reactive-forms
Munawar Hassan
Munawar Hassan

Reputation: 25

Type 'AbstractControl | null' is not assignable to type 'NgIterable<any> | null | undefined'

my component.ts code is

forms = new FormGroup({
    topics: new FormArray([]),
  });

  addTopic(topic: HTMLInputElement) {
    (this.refForm as FormArray).push(new FormControl(topic.value));
    // topic.value = '';
  }

  get refForm() {
    return this.forms.get('topics');
  }

and .html file has following code.

<form [formGroup]="forms">
  <input
    type="text"
    class="form-control"
    (keyup.enter)="addTopic(topic)"
    #topic
  />
  <ul class="list-group">
    <li *ngFor="let topic of forms.get('topics')">
      class="list-group-item">
      {{ topic.value }}
    </li>
  </ul>
</form>

I tried to find and fix the problem but solutions or answer are not available.

Upvotes: 1

Views: 7065

Answers (3)

Subranil
Subranil

Reputation: 117

Replace the line:

<li *ngFor="let topic of forms.get('topics')">

with:

<li *ngFor="let topic of forms.get('topics')?.value">

That should resolve the problem.

Upvotes: 1

Ben Racicot
Ben Racicot

Reputation: 5905

I just solved this by changing form.get to [control]="this.form.controls['reply']"

Upvotes: 0

yurzui
yurzui

Reputation: 214017

You need to iterate over controls but you're passing an instance of AbstractControl or possible null value to ngFor loop.

I guess you wanted to pass array of controls in your FormArray.

You already have a get helper that can be enhanced with correct type:

get refForm() {
  return this.forms.get('topics') as FormArray;
                                  ^^^^^^^^^^^^
}

with the above code you can correct your html

*ngFor="let topic of refForm.controls"

Upvotes: 5

Related Questions