ngModel не установлен в динамическом вводе в ngFor с опцией добавления и удаления

Question

Используя Angular 4, мне нужно создать динамическое поле ввода, где пользователи могут добавлять и удалять поля ввода.

Но я получаю проблему, когда один и тот же ngModel присваивается всем полям ввода и устанавливается сброс полей ввода при добавлении или удалении кнопки.

Угловой код HTML:

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

Угловой код TS:

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

Код, который я пробовал, находится на Stackblitz

Не удалось выяснить, почему ngModel не настроен должным образом.

Answer 1

Это потому, что все поля ввода получают одинаковое значение для атрибута name. Присвойте уникальный name каждому полю ввода.

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

Исправлено стек