data-binding - Angular2 ngModel inside of ngFor

Question

I am trying to bind an array of strings from my inputs, so in the html file I wrote this:

<div *ngFor="let word of words; let in=index" class="col-sm-3">
      <div class="form-group">
        <input type="text" [(ngModel)]="words[in]"  class="form-control" [attr.placeholder]="items[in]" required>
      </div>
  </div>

But this didn't work as expected because when I log the words variable it show an empty array as initialized in my Component class. Also, I log the variable from another component should that supposed to be the issue for my problem. I have two components:

• The form component that contains an array of query components.
• The query child component that has an array of words strings.

So, the words variable is declared into the queries component but I am logging this variable through the form component like this:

console.log(JSON.stringify(this.queries));

While queries is an array of Query in the form component:

queries:Query[] = [];

Thanks for your help!

Answer 1

The problem is with using an array of primitive values (words) in ngFor.

You can change words to an array of objects like

words = [{value: 'word1'}, {value: 'word2'}, {value: 'word3'}];

and use it like

  <div *ngFor="let word of words; let in=index" class="col-sm-3">
      <div class="form-group">
        <input type="text" [(ngModel)]="words[in].value"  class="form-control" [attr.placeholder]="items[in]" required>
      </div>
  </div>

This might also be solvable using trackBy but I'm not sure.

Answer 2

Each input tag has to have a unique 'name' attribute defined, as described in:

Angular2 ngModel inside ngFor (Data not binding on input)

Here is the corrected code:

<div *ngFor="let word of words; let in=index" class="col-sm-3">
  <div class="form-group">
    <input type="text" [(ngModel)]="words[in]" name="word{{in}}" class="form-control" [attr.placeholder]="items[in]" required>
  </div>

Answer 3

Solved this by using the @Input() function and passing the queries array + the query index number. Thank you guys for the support.