Question

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

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="text-input" - 属性必须是唯一的，以便将这些字段评估为单独的表单字段。

因此，您的问题的解决方案非常简单，只需为您的字段指定一个唯一的名称，您就可以使用索引，所以更改：

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

例如以下内容：

{{1}}

然后它就像一个魅力！ :)这是分叉的

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

1 个答案:

Plunker