Using [(ngModel)] 2 way data binding with ngFor , array doesn't update the values of the rows

Question

I have built this form:

Here's the html code:

<table class="table table-hover table-bordered table-striped table-highlight">
  <thead>
    <tr>
      <th *ngFor="let cell of tableData2.headerRow">{{ cell }}</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let row of tableData2.dataRows">
      <td *ngFor="let cell of row">
        <input type="text" class="form-control border-input" [(ngModel)]="cell" name="cell" />
      </td>
    </tr>
  </tbody>
</table>

Here's the relevant typescript code:

declare interface TableData {
  headerRow: string[];
  dataRows: string[][];
}
public tableData2: TableData;
this.tableData2 = {
  headerRow: ['Version', 'Approbateur(nom+fonction)', 'Principales remarques', 'Date d\'approbation'],
  dataRows: [
    ['ahmed', '', '', ''],
    ['', '', '', ''],
    ['', '', '', ''],
    ['', '', '', ''],
    ['', '', '', ''],
    ['', '', '', ''],
    ['', '', '', ''],
  ]
};

As you may have noticed, the two-way data binding works in "one direction", the value "ahmed" does get displayed.
However, when I change the value of an input in a table like this:
And then I consoleLog the tableData2 variable:
As you may notice, the new value SAM doesn't get updated in the tabledata variable. I.e, the two-way data-binding doesn't work and I cannot retrieve the values from the table.
What did I do wrong?

Vivek Doshi · Accepted Answer · 2019-08-12 13:02:24Z

10

2-way binding doesn't work on array value, it needs some object to update

So first change is let i = index; and [(ngModel)]="row[i]" :

<td *ngFor="let cell of row; 
        let i = index;
        trackBy: customTrackBy
        ">
    <input type="text" class="form-control border-input" [(ngModel)]="row[i]" name="cell" />
</td>

Second Change : (Issue is shown in demo)

// Your list will be reloaded again by ngFor when you change one field value, 
// and it will lose the focus. 
// You can add a trackBy to determine if the list must or must not be reloaded. The code below seems to solve the issue:

customTrackBy(index: number, obj: any): any {
    return index;
}

WORKING DEMO ( With Solution + Issue )

edited Aug 12, 2019 at 13:02

answered Aug 12, 2019 at 11:48

Vivek Doshi

58.8k12 gold badges120 silver badges126 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Vivek Doshi Over a year ago

@AhmedGhrib, Glad to know, Happy coding BTW :)

Charlie Araya · Accepted Answer · 2019-08-12 12:19:21Z

0

Im not sure if it is possible to bind this way to primitive types. If you could make the row an object and bind the input to one of the object's variables I know it works, just tried it :)

answered Aug 12, 2019 at 12:19

Charlie Araya

5445 silver badges10 bronze badges

Collectives™ on Stack Overflow

Using [(ngModel)] 2 way data binding with ngFor , array doesn't update the values of the rows

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related