使用添加和删除选项在 ngFor 的动态输入中未设置 ngModel
ngModel not set in Dynamic input in ngFor with add and remove option
使用 Angular 4,我必须创建一个动态输入字段,用户可以在其中添加和删除输入字段。
但我遇到了一个问题,即相同的 ngModel 被分配给所有输入字段,并且设置输入字段在添加或删除按钮时重置。
Angular Html 代码:
<h3> Dynamic Input </h3>
<form (ngSubmit)="SubmitFnc($event)">
<div *ngFor="let ItmVar of inputAryVar; let IdxVar=index" [attr.Idx]="IdxVar">
<input type="text" name="field1" placeholder="Name Field"
[(ngModel)]="ItmVar.nameLbl"> 
<button type="button" (click)="addDelBtnFnc(ItmVar,IdxVar)">
{{ IdxVar == inputAryVar.length - 1 ? "[ + ]" : "[ - ]"}}
</button>
</div>
<button > Submit </button>
</form>
Angular TS代码:
export class AppComponent {
inputAryVar:any
constructor() { }
ngOnInit(){
this.inputAryVar=[
{
"nameLbl":"Field1"
},
{
"nameLbl":"Field2"
},
{
"nameLbl":"Field3"
}
]
}
addDelBtnFnc(itmVar, idxVar)
{
if(idxVar==this.inputAryVar.length-1)
{
this.inputAryVar.push({
nameLbl:"Field"+(this.inputAryVar.length+1)
})
console.log(this.inputAryVar)
}
else
this.inputAryVar.splice(idxVar,1)
}
SubmitFnc(event)
{
console.log(this.inputAryVar)
}
}
The Code I tried is on Stackblitz
无法弄清楚为什么 ngModel 没有正确设置。
那是因为所有输入字段都获得相同的 name
属性值。为每个输入字段分配唯一的 name
。
<input type="text" name="field_{{IdxVar}}" placeholder="Name Field"
[(ngModel)]="inputAryVar[IdxVar].nameLbl">
已修复stackblitz
使用 Angular 4,我必须创建一个动态输入字段,用户可以在其中添加和删除输入字段。
但我遇到了一个问题,即相同的 ngModel 被分配给所有输入字段,并且设置输入字段在添加或删除按钮时重置。
Angular Html 代码:
<h3> Dynamic Input </h3>
<form (ngSubmit)="SubmitFnc($event)">
<div *ngFor="let ItmVar of inputAryVar; let IdxVar=index" [attr.Idx]="IdxVar">
<input type="text" name="field1" placeholder="Name Field"
[(ngModel)]="ItmVar.nameLbl"> 
<button type="button" (click)="addDelBtnFnc(ItmVar,IdxVar)">
{{ IdxVar == inputAryVar.length - 1 ? "[ + ]" : "[ - ]"}}
</button>
</div>
<button > Submit </button>
</form>
Angular TS代码:
export class AppComponent {
inputAryVar:any
constructor() { }
ngOnInit(){
this.inputAryVar=[
{
"nameLbl":"Field1"
},
{
"nameLbl":"Field2"
},
{
"nameLbl":"Field3"
}
]
}
addDelBtnFnc(itmVar, idxVar)
{
if(idxVar==this.inputAryVar.length-1)
{
this.inputAryVar.push({
nameLbl:"Field"+(this.inputAryVar.length+1)
})
console.log(this.inputAryVar)
}
else
this.inputAryVar.splice(idxVar,1)
}
SubmitFnc(event)
{
console.log(this.inputAryVar)
}
}
The Code I tried is on Stackblitz
无法弄清楚为什么 ngModel 没有正确设置。
那是因为所有输入字段都获得相同的 name
属性值。为每个输入字段分配唯一的 name
。
<input type="text" name="field_{{IdxVar}}" placeholder="Name Field"
[(ngModel)]="inputAryVar[IdxVar].nameLbl">
已修复stackblitz