Angular - two-way binding problem on ngFor loop

Question

I am writing a project in Angular 10 and I don't know why but the property displayed through input is different than the same property displayed using interpolation in the ngFor loop. Those values start to be different every time I am pushing a new customSection to the customSections array.

html part:

  <div
    class="uk-margin-top"
    *ngFor="
      let customSection of resume.customSections;
      let customSectionIndex = index
    "
  >
      <input
        class="uk-input uk-form-blank uk-text-bold uk-text-lead uk-padding-remove-left"
        type="text"
        name="sectionName"
        [(ngModel)]="customSection.sectionName
        "
        (ngModelChange)="getHtmlContent()"
      />

      <span>{{ customSection.sectionName }}</span>

typescript part:

  onCustomSectionAddClick() {
    this.resume.customSections.push(new CustomSection("Untitled"));
    this.getHtmlContent();
  }

Everything is fine but when I click the button to add a new custom section then as you can see 'Untitled' is the value displayed in input for new and older (earlier added) custom sections, but span shows the other value (on this screenshot - value 'b'). Does anyone know why it can happen?

I did some workaround to make it work correctly, but still I know that it's just hack (not good solution):

html side:

      <input
        class="uk-input uk-form-blank uk-text-bold uk-text-lead uk-padding-remove-left"
        type="text"
        name="sectionName"
        (change)="onCustomSectionNameChange($event, customSectionIndex)"
        value="{{ customSection.sectionName }}"
      />

      <span>{{ customSection.sectionName }}</span>

typescript side:

  onCustomSectionNameChange(event: any, index: number) {
    this.resume.customSections[index].sectionName = event.target.value;
    this.getHtmlContent();
  }

You don't clear the customerSection after the the button clicked. This doesn't happen automatically. Also, what does getHtmlContent() do and why are you execution it after each changes? — n9iels
@n9iels I edit my post to show how I can make it work correctly (hack). getHtmlContent() method just sends data to API and that's all — tzm
I tried to reproduce your example on StackBlitz and could not reproduce the error. Maybe something is to blame that you did not provide? Here the link to the StackBlitz: stackblitz.com/edit/angular-ivy-kokush?file=src/app/… — pascalpuetz

tzm tzm · Accepted Answer · 2020-09-16T16:17:03

After a few hours of thinking about this problem, I noticed what a simple mistake I've made. The input's name attribute should be unique in ngFor loop. So I've changed this:

  <input
    class="uk-input uk-form-blank uk-text-bold uk-text-lead uk-padding-remove-left"
    type="text"
    name="sectionName"
    [(ngModel)]="customSection.sectionName
    "
    (ngModelChange)="getHtmlContent()"
  />

to this:

  <input
    class="uk-input uk-form-blank uk-text-bold uk-text-lead uk-padding-remove-left"
    type="text"
    name="sectionName-{{ customSectionIndex }}"
    [(ngModel)]="customSection.sectionName
    "
    (ngModelChange)="getHtmlContent()"
  />

And now everything works great. Thank you guys for trying to help me and find a mistake.

Angular - two-way binding problem on ngFor loop

1 Answers