角度动态输入填充相同的值答案

【问题标题】：angular dynamic input populates same value角度动态输入填充相同的值
【发布时间】：2022-01-12 14:49:10
【问题描述】：

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

图片

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

【问题讨论】：

标签： angular forms input angular-ngmodel angular-template-form

【解决方案1】：

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

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

最初的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
 ...
}

【讨论】：

【解决方案2】：

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

【讨论】：