Angular2 动态表单显示不正确的 ngModel 数据

Question

我正在生成 table 和表单来编辑每个字段，但是当我尝试编辑它时，输入字段中显示的数据不正确。

HTML

        <form (ngSubmit)="onEditSubmit()">
        <span>What the form gets</span>
        <div *ngFor="let k of keys; let i = index" class="form-group row">
          <span>{{k|uppercase}}</span>
          <div class="col-md-9">
            <input [(ngModel)]="updateModels[keys[i]]" type="text" name="text-input" class="form-control" placeholder="{{k}}" />
          </div>
          </div>
          <button>Submit</button>
          </form>

JS

public data: any = [{id: 1, code1: "VALUE1", code2: "VALUE2", code3: "VALUE3"},{id: 2, code1: "TEST1", code2: "TEST2", code3: "TEST3"}];
public keys: any = ["code1","code2","code3"];
public activeRoleId = '';
public updateModels: any = {};


public toEditData: any = "";
public editedData: any = "";

constructor() {
}

onEditSubmit() {
  this.editedData = this.updateModels;
}

/*CLick on element actions*/
editElement(item): void {
    for (let i = 0; i < this.keys.length; i++) {
        this.updateModels[this.keys[i]] = item[this.keys[i]];
    }
    console.log(this.updateModels);
    this.toEditData = this.updateModels;
    this.activeRoleId = item.id;
}

Plunker

Answer 1

这个错误是因为您使用的是表格。如果您删除表单标签，这将如您所愿地工作。但是，由于您使用的是表单，因此每个 name 属性都必须是唯一的，以便这些字段被评估为单独的表单字段。

所以你的问题的解决方案很简单，给你的字段分配一个唯一的名字，你可以利用索引，所以改变：

name="text-input"

例如以下内容：

name="text-input{{i}}"

那么它就像一个魅力！ :) 这是分叉的

Angular2 动态表单显示不正确的 ngModel 数据

Angular2 Dynamic form displaying incorrect ngModel data

forms

angular

angular4

Plunker