1

我正在尝试构建一个表单，您可以在单击添加按钮时创建另一个输入字段。问题是为每一行输入填充了相同的值。从下图中可以看出，每一行都获得相同的值。我认为这是因为 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: ''
})
}
4

2 回答 2

1

由于您是动态添加字段，因此您需要定义适当的模型类型来保存数据。虽然 的类型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"

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

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

removeField(i: number) {
 // remove relevant record from this.addmodel
 ...
}
于 2022-01-12T17:36:37.300 回答
0

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

于 2022-01-12T15:06:33.683 回答