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

Question

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

但是我遇到了一个问题，即将相同的ngModel分配给所有输入字段，并在“添加”或“删除”按钮上重置“设置输入字段”。

角度HTML代码：

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)
  }
}

角度TS代码：

{{1}}

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