Data binding in HTML input in *ngFor in Angular 8

Question

I am using *ngFor to loop through an array of objects and displaying the value in the HTML. In the HTML, the value is displayed in a input element as I want the user to change the value if required and then have the changed value saved using a Save button. Unfortunately the data binding is not working at all. The values from the array are not displaying. Here is my code:

<tr *ngFor="let data of rrReasons; let i = index;trackBy:trackByIndex;">
<td>
  <input type="number" name=a{{index}} [(ngModel)]="rrReasons[index].signatory1">
</td>

And this is the json:

{ "signatory1" : "1009648", "signatory2" : "1003444", }

It's not clear where your array is? You've posted an object with two properties instead of an array. — Kurt Hamilton
– Kurt Hamilton, Commented Mar 16, 2020 at 10:00
Hey Kurt, the array is an array of Object, the Object is similar to the one I have given — Yogesh Mali
– Yogesh Mali, Commented Mar 16, 2020 at 10:02
You are iterating on rrReasons and you are using [(ngModel)]="rrReasons[index].signatory1", you should instead use the data variable you created like this [(ngModel)]="data.signatory1" — Tombery
– Tombery, Commented Mar 16, 2020 at 10:02

Kurt Hamilton · Accepted Answer · 2020-03-16 10:03:43Z

3

You are using rrReasons[index].signatory1. index isn't available as a variable inside the loop.

You should instead use rrReasons[i].signatory1 or data.signatory1.

<table>
  <tr *ngFor="let data of rrReasons; let i = index;trackBy:trackByIndex;">
    <td>
      <input type="number" name=a{{i}} [(ngModel)]="rrReasons[i].signatory1">
    </td>
</table>

DEMO: https://stackblitz.com/edit/angular-zmscxv

answered Mar 16, 2020 at 10:03

Kurt Hamilton

13.7k1 gold badge28 silver badges42 bronze badges

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

1 Comment

Yogesh Mali Over a year ago

Thanks Kurt, the demo looks good. I will try it in my code...

Paaarth · Accepted Answer · 2020-03-16 10:01:45Z

Your TS code should be like

rrReasons = [{
    "signatory1": "1009648",
    "signatory2": "1003444",
  },
  {
    "signatory1": "1009649",
    "signatory2": "1003445",
  },
  {
    "signatory1": "1009650",
    "signatory2": "1003446",
  },
  {
    "signatory1": "1009651",
    "signatory2": "1003447",
  },
  {
    "signatory1": "1009652",
    "signatory2": "1003448",
  }
]

HTML code should be like

<tr *ngFor="let data of rrReasons; let i = index;trackBy:trackByIndex;">
  <td>
    <input type="number" name=a{{index}} [(ngModel)]="data.signatory1">
  </td>
</tr>

Note: while you are looping an array then you have to use iterator value to get the actual object value.

Working Example:- Demo

Jasdeep Singh · Accepted Answer · 2020-03-16 10:04:00Z

You need to use ngModel for two way data binding. It will automatically keep your binding in sync.

I have created a working stackblitz instance here - https://stackblitz.com/edit/angular-8kca94

You can read about NgModel about here - https://angular.io/api/forms/NgModel

Please find snippit of code here:

<div *ngFor="let element of arr">
  <input [value]="element.value" [name]="element.value" [(ngModel)]="element.value" />
</div>

Typescript code here:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  arr = [
    {id: 1, value: 'value1'},
    {id: 2, value: 'value2'},
    ]
}

Collectives™ on Stack Overflow

Data binding in HTML input in *ngFor in Angular 8

3 Answers 3

1 Comment

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Related