angular 动态输入填充相同的值

Question

我正在尝试构建一个表单，您可以在其中通过单击添加按钮创建另一个输入字段。问题是为每一行输入填充了相同的值。从下图中可以看出，每一行都获得相同的值。我认为这是因为 ngmodel。或者也许是别的什么。如何解决？

image

html

   <div class="row mt-2 " *ngFor="let auditField of dynamicAuditField; let i = index;">
        <div class="col-md">
           <select class="form-control dynamic-input form-input p-0 pl-2"
              id="criteria" #criteria="ngModel" [(ngModel)]="addmodel.criteria"
              name="criteria_{{auditField.id}}">
                <option [value]='null' disabled>Select Criteria</option>
                <option *ngFor="let data of auditField.criteria" [value]="data.value"> 
            {{data.name}}</option>
           </select>
       </div>

       <div class="col-md">
        <select class="form-control dynamic-input form-input p-0 pl-2" id="condition" #condition="ngModel" 
         [(ngModel)]="addmodel.condition" name="condition_{{auditField.id}}">
         <option [value]='null' disabled>Select Condition</option>
         <option *ngFor="let data of auditField.condition" [value]="data.value">{{data.name}}</option>
        </select>
       </div>

       <div class="col-md">
          <input type="text" class="form-control dynamic-input form-input p-0 pl-2" 
            #value="ngModel" [(ngModel)]="addmodel.value" name="value_{{auditField.id}}">
       </div>
       <div>
         <i class="fa fa-trash-o input-row-delete" aria-hidden="true (click)="removeField(i)"></i>
       </div>
     </div>

ts

public dynamicAuditField: any[] = [{
id: 1,
criteria: [
  {
    name: "Process 1",
    value: "process_1"
  },
  {
    name: "Process 2",
    value: "process_2"
  },
  {
    name: "Process 3",
    value: "process_3"
  },
],
condition: [
  {
    name: "Sub Process 1",
    value: "sub_process_1"
  },
  {
    name: "Sub Process 2",
    value: "sub_process_2"
  },
  {
    name: "Sub Process 3",
    value: "sub_process_3"
  },
],
value: ''
}];

addField(){
this.dynamicAuditField.push({
  id: this.dynamicAuditField.length + 1,
  criteria: [
    {
      name: "Process 1",
      value: "process_1"
    },
    {
      name: "Process 2",
      value: "process_2"
    },
    {
      name: "Process 3",
      value: "process_3"
    },
  ],
  condition: [
    {
      name: "Sub Process 1",
      value: "sub_process_1"
    },
    {
      name: "Sub Process 2",
      value: "sub_process_2"
    },
    {
      name: "Sub Process 3",
      value: "sub_process_3"
    },
  ],
  value: ''
})
}

Answer 1

要解决此问题，您可以使用以下行更改 ngModel：[(ngModel)]="dynamicAuditField[i].value"

Answer 2

由于您是动态添加字段，因此需要定义适当类型的模型来保存数据。虽然 addmodel 的类型在问题中没有共享，它似乎是一个对象，但你真正需要的是一个数组来保存与表单控件对应的多个值。

使用当前的代码逻辑，您将多个表单控件绑定到同一个模型值，因此填充了相同的数据。尝试将 addmodel 定义为对象数组，这应该可以解决问题。下面的代码片段应该可以帮助您解决问题。

最初的 addmodel 应该是这样的：

// Please handle the types and data as per your logic
// Important point to note is that it should be an array with one element(an object)
addmodel: any = [{}];

在 html 文件中，您需要将 [(ngModel)] 更改为：

[(ngModel)]="addmodel[i].criteria"
[(ngModel)]="addmodel[i].condition"
[(ngModel)]="addmodel[i].value"

此外，您还需要在调用 addField() 和 removeField(i) 时注意更新 addmodel：

addField() {
 this.addmodel.push({}); // Add new record
 ...
}

removeField(i: number) {
 // remove relevant record from this.addmodel
 ...
}

angular 动态输入填充相同的值

angular dynamic input populates same value

angular

forms

input

angular-ngmodel

angular-template-form