ngModel未在ngFor中的动态输入中设置添加和删除选项

Question

使用Angular 4，我必须创建一个动态输入字段，用户可以在其中添加和删除输入字段。

但是我遇到的问题是，同一个ngModel被分配给所有输入字段，并且在添加或删除按钮时设置输入字段重置。

Angular Html Code :

<h3> Dynamic Input </h3>

<form (ngSubmit)="SubmitFnc($event)">
  <div *ngFor="let ItmVar of inputAryVar; let IdxVar=index" [attr.Idx]="IdxVar">
  <input type="text" name="field1" placeholder="Name Field"
    [(ngModel)]="ItmVar.nameLbl">&emsp;
    <button type="button" (click)="addDelBtnFnc(ItmVar,IdxVar)">
      {{ IdxVar == inputAryVar.length - 1  ? "[ + ]" : "[ - ]"}}
    </button>
  </div>
  <button > Submit </button>
</form>

Angular TS Code :

export class AppComponent  {
  inputAryVar:any

  constructor() { }

  ngOnInit(){ 
  this.inputAryVar=[
    {
      "nameLbl":"Field1"
    },
    {
      "nameLbl":"Field2"
    },
    {
      "nameLbl":"Field3"
    }
  ]
  }

  addDelBtnFnc(itmVar, idxVar)
  {
    if(idxVar==this.inputAryVar.length-1)
    {
      this.inputAryVar.push({
      nameLbl:"Field"+(this.inputAryVar.length+1)
    })
    console.log(this.inputAryVar)
    }
    else
      this.inputAryVar.splice(idxVar,1)
  }

  SubmitFnc(event)
  {
    console.log(this.inputAryVar)
  }
}

The Code I tried is on Stackblitz

无法弄清楚为什么没有正确设置ngModel。

Answer 1

这是因为所有输入字段都获得了name属性的相同值。为每个输入字段分配唯一的name。

<input type="text" name="field_{{IdxVar}}" placeholder="Name Field"
        [(ngModel)]="inputAryVar[IdxVar].nameLbl">

固定stackblitz