CODEWITHSUNDEEP
angular
Patata
Patata

Reputation: 273

Input values in angular 4 is not showing as it showing in hard coded values

I am facing unknown issue while development.

Image

In above image, one can see input fields having value as well as hard coded value.Problem is hard coded values should reflect in input fields but all input values has values of last input fields.

export class AppComponent  {
  name = 'Angular 4';
    temlateInputs=[
      {"name":"Australia","bi":"33","ex":"0","br":"50","ot":"0","ab":"AU"},
      {"name":"Austria","bi":"55","ex":"0","br":"25","ot":"0","ab":"AV"},
      {"name":"Belgium","bi":"66","ex":"0","br":"25","ot":"0","ab":"BB"},
      {"name":"China","bi":"77","ex":"88.887","br":"30","ot":"0","ab":"CH"}];
}

Table 

<table>
<tr *ngFor="let data of temlateInputs">
  <td>{{data.name}}</td>
  <td>{{data.bi}}
  <input  type="text" class="form-control" name="bi" [(ngModel)]="data.bi"      />
  </td>
  <td>{{data.ex}}
  <input  type="text" class="form-control" name="ex"  [(ngModel)]="data.ex"      />
  </td>
  <td>{{data.br}}
  <input  type="text" class="form-control" name="br"  [(ngModel)]="data.br"    />
  </td>
  <td>{{data.ot}}
  <input  type="text" class="form-control" name="ot"  [(ngModel)]="data.ot"     />
  </td>
</tr>
</table>

Strange thing, it is working perfectly in stackblitz

stackblitz demo

Why I am facing such errors.

Upvotes: 0

Views: 153

Answers (1)

Vivek Doshi
Vivek Doshi

Reputation: 58573

That can only be possible if you have same input name,

Replace your code block with this and try :

<table>
<tr *ngFor="let data of temlateInputs;let i = index;">
    <td>
        {{data.name}}
        </td>
    <td>{{data.bi}}
        <input  type="text" class="form-control" name="bi{{i}}" [(ngModel)]="data.bi"      />
    </td>
    <td>{{data.ex}}
        <input  type="text" class="form-control" name="ex{{i}}"  [(ngModel)]="data.ex"      />
    </td>
    <td>{{data.br}}
        <input  type="text" class="form-control" name="br{{i}}"  [(ngModel)]="data.br"    />
    </td>
    <td>{{data.ot}}
        <input  type="text" class="form-control" name="ot{{i}}"  [(ngModel)]="data.ot"     />
    </td>
</tr>
</table>

Upvotes: 1

Related Questions