模板驱动表单显示的值不正确

Question

I have a bug when I remove an address and add a new one. The previous address gets overwritten with the new one.

I created a small demo application to showcase my problem:

github: https://github.com/kolomu/HeroDemo
stackblitz: https://stackblitz.com/edit/angular-gitter-5o6ydi

It's not that the model is wrong, somehow the view which angular renders isn't in updated correctly.

View:

  <form #heroForm="ngForm">

    <div class="form-group">
      <div class="addresses" *ngFor="let address of model.addresses; let i=index">
        <label for="address-{{i}}">Address {{i}}</label>
        <input type="text" class="form-control" [(ngModel)]="address.location" name="location-{{i}}">
        <button class="btn btn-danger" (click)="remove(address)">Remove Address</button>
      </div>
    </div>

    <button class="btn btn-primary" (click)="add()">Add Address</button>

  </form>

Component Class:

export class HeroFormComponent {

  model = new Hero(18, 'Dr IQ', [new Address(1,'main','Earth'), new Address(9001,'sub','Moon')]);

  remove(address) {
    const index = this.model.addresses.findIndex(
      address => address.id === address.id
    );

    this.model.addresses.splice(index, 1);
  }

  add(){
    this.model.addresses.push(new Address());
  }

}

Data Model:

export class Address {
    constructor(public id?: number, public type?:string, public location?: string) { }
}


export class Hero {

    constructor(
      public id: number,
      public name: string,
      public addresses: Address[]
    ) {  }

}

GIF-Image showcasing the problem: https://gfycat.com/DelightfulSpiffyBetafish

Answer 1

One problem is that you use the same name address for the parameter of the remove method and for the parameter in findIndex . As a result, the comparison address.id === address.id returns true for the first item tested because it compares the item to itself.

remove(address) {
  const index = this.model.addresses.findIndex(
    address => address.id === address.id          <-- Always true!
  );
  ...
}

You should use a different name, for example _address for the parameter in findIndex (as shown in this stackblitz ):

remove(address) {
  const index = this.model.addresses.findIndex(
    _address => _address.id === address.id
  );
  ...
}

Or you could pass the index as a parameter to remove , as suggested by Embrioka .

---

In your code sample, when you add a new address after deleting the first one, the two fields show the same data (the value of the new address). That is strange, since everything looks fine in the template and in the code. According to my tests, the problem comes from the fact that the name of the new input element is the same as the one used previously for the other element. In your template, if you replace:

name="location-{{i}}"

with

name="location-{{address.id}}"

the problem disappears, as long as each address.id is unique. Apparently, reusing the same name for a different item prevents the input content from being updated correctly by Angular.

Answer 2

Do not pass the whole address, only the index:

<div class="form-group">
      <div class="addresses" *ngFor="let address of model.addresses; let i=index">
        <label for="address-{{i}}">Address {{i}}</label>
        <input type="text" class="form-control" [(ngModel)]="address.location" name="location-{{i}}">
        <button class="btn btn-danger" (click)="remove(i)">Remove Address</button>
      </div>
</div>

And in the ts:

remove(index) {
    this.model.addresses.splice(index, 1);
}

With this solution you don't even have to find the index.

The problem with your solution what the previous commenter mentioned and also you id will be undefined, so in the add method just define an ID or pick an another property when looking for the index!