我正在嘗試構建一個表單，您可以在單擊添加按鈕時創建另一個輸入欄位。問題是為每一行輸入填充了相同的值。從下圖中可以看出，每一行都獲得相同的值。我認為這是因為 ngmodel。或者也許是別的東西。如何解決這個問題？
圖片
html
<div *ngFor="let auditField of dynamicAuditField; let i = index;">
<div >
<select
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 >
<select 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 >
<input type="text"
#value="ngModel" [(ngModel)]="addmodel.value" name="value_{{auditField.id}}">
</div>
<div>
<i 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: ''
})
}
uj5u.com熱心網友回復：
由于您是動態添加欄位，因此您需要定義適當的模型型別來保存資料。雖然 的型別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
...
}
uj5u.com熱心網友回復：
要解決此問題，您可以使用以下行更改 ngModel：[(ngModel)]="dynamicAuditField[i].value"
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/411232.html
標籤：