如何从循环ngFor中的输入类型=“文本”中获取输入值

Question

I have problem about getting value from input type="text" in ngFor while I bind it with [(ngModel)] all of it has same value how can I bind all input in ngFor ?

html

<button (click)="saveFeature()" type="button">save</button>

<input class="form-control" type="text" />
<button (click)="addFeature()" type="button">Add</button>

<div *ngFor="let inputservice of servicesfeature_id; let i=index">
  <input class="form-control" [(ngModel)]="listServiceFeature" type="text" />
  <button (click)="RemoveFeature(i)" type="button">Remove</button>
</div>

component

servicesfeature_id: any = [];
servicesfeature_length: number = 0;
listServiceFeature: any = [];
servicefeature_name: string;

saveFeature(): void {
  console.log(this.listServiceFeature);
}

addFeature(): void {
  this.servicesfeature_id.push('service' + this.servicesfeature_length);
  this.servicesfeature_length += 1;
}

RemoveFeature(index): void {
  this.servicesfeature_length -= 1;
  this.servicesfeature_id.splice(index, 1);
}

here is code plnkr.co

Answer 1

If I understand this, you want to have the inputs bind to members of the listServiceFeature array. Is that right? If that's what you want to do, you can bind directly to the array members using the index:

  <input class="form-control" [(ngModel)]="listServiceFeature[i]" type="text" />

Now if you add some text to the added inputs and hit save you get the whole array on the console.

Answer 2

After a long search, if you are using a newer version of angular (Angular 4) you have to import FormModule

Angular 4 - "Can't bind to 'ngModel' since it isn't a known property of 'input' " error