CODEWITHSUNDEEP
angularngfor
user7482814
user7482814

Reputation: 11

Databinding ngFor* input in table doesn't work as expected

 <tr *ngFor="let p of personen; let i=index">
          <td>  <input [(ngModel)]="p.Vorname" name="p.Vorname" type="text" class="form-control" required ></td>
          <td> <input [(ngModel)]="p.Nachname" name="p.Nachname" type="text" class="form-control" required ></td>
          <td> <input [(ngModel)]="p.Geburtsdatum" name="p.Geburtsdatum" type="date" class="form-control" required ></td>
          <button (click)="premove(i)" type="button" class="btn btn-danger">Entfernen</button>
        </tr>

If I add a new item with

  this.personen.push(new Person())

data in my array 'personen' is OK, but my input fields on my page are shown as empty.

Upvotes: 1

Views: 848

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657426

Ensure the name property is unique:

    <tr *ngFor="let p of personen; let i=index">
      <td>  <input [(ngModel)]="p.Vorname" name="Vorname{{i}}" type="text" class="form-control" required ></td>
      <td> <input [(ngModel)]="p.Nachname" name="Nachname{{i}}" type="text" class="form-control" required ></td>
      <td> <input [(ngModel)]="p.Geburtsdatum" name="Geburtsdatum{{i}}" type="date" class="form-control" required ></td>
      <button (click)="premove(i)" type="button" class="btn btn-danger">Entfernen</button>
    </tr>

Upvotes: 1

Related Questions