Template variable is undefined when using ngFor

Question

When assigning ngModel to a template variable within an ngFor the value is undefined. It's been brought up on the Angular repo here but it's been over a year with seemingly no resolution. Does anybody have a solution or workaround? Seems like it should be a common issue.

    <tr *ngFor="let desc of descriptions; let i = index">
      <td>
        <my-input required name="description" #description="ngModel" [maxlength]="400" class="edit-input" type="text" [(ngModel)]="desc.description"></my-input>
        <label *ngIf="isRequired(description)" class="required-label">{{'required' | translate}}</label>
        <ng-template #readOnly><p>{{ desc.description }}</p></ng-template>
      </td>
    </tr>

What if you `[(ngModel)]="descriptions[i].desc.description"` — Reactgular, Jul 24 '18 at 20:23
See https://stackoverflow.com/questions/39336708/angular2-ngmodel-inside-ngfor-data-not-binding-on-input/40709264. — Lud, Jul 25 '18 at 12:22

score 0 · Answer 1 · answered Jul 25 '18 at 12:25

To put a ngModel in a ngFor you have to make sure that each div has a unique name.

<tr *ngFor="let desc of descriptions; let i = index">
  <td>
    <my-input required name="description-{{i}}" #description="ngModel" [maxlength]="400" class="edit-input" type="text" [(ngModel)]="desc.description"></my-input>
    <label *ngIf="isRequired(description)" class="required-label">{{'required' | translate}}</label>
    <ng-template #readOnly><p>{{ desc.description }}</p></ng-template>
  </td>
</tr>

Still comes back undefined. – Amerikaner Jul 25 '18 at 13:55 — Amerikaner, Jul 25 '18 at 13:55

Template variable is undefined when using ngFor

1 Answers1