如何解决ngModel 在 ng-For 中使用时覆盖先前的值
这是我的html文件
<form [formGroup]='itemUpdateForm'>
<div class="row">
<mat-form-field class="col-sm-8">
<mat-label>Restaurant Name:</mat-label>
<input matInput type="text" required [(ngModel)]="this.restuarantService.selectedProduct.name" placeholder="Enter Restaurant Name" formControlName='name'>
</mat-form-field>
</div>
<div class="row" *ngFor='let index of counter(this.restuarantService.selectedProduct.Items.length) ;let i = index' formGroupName='Items'>
<mat-form-field class="col-sm-5">
<mat-label>Food Name:</mat-label>
<input matInput type="text" required [(ngModel)]='this.restuarantService.selectedProduct.Items[i].foodName' placeholder="Enter Food Name" formControlName='foodName'>
</mat-form-field>
<mat-form-field class="col-sm-5" >
<mat-label>Price:</mat-label>
<input matInput type="text" required [(ngModel)]="this.restuarantService.selectedProduct.Items[i].price" placeholder="Enter Price" formControlName='price'>
</mat-form-field>
</div>
</form>
最后一个值会覆盖所有字段中的先前值。所以我得到了所有字段中的最后一个值..我想按顺序显示所有值。我需要做什么改变
解决方法
Venkatesh,您输入了类型错误。如果使用 formBuilder,则是
this.formBuilder.group({
name: this.restuarantService.selectedProduct.name
...
})
如果你使用 FormGroup 和 FromControl 的构造函数,你使用
new FormGroup({
name: new FormControl({value:this.restuarantService.selectedProduct.name})
...
})
或
new FormGroup({
name: new FormControl(this.restuarantService.selectedProduct.name)
...
})
好吧,您的代码中的另一个问题是您需要为“项目”使用 FormArray,请参见例如this SO
UPDATE 看到它总是一样的
1.- 创建一个返回 formArray 的 getter
get itemsArray()
{
return this.itemUpdateForm.get('Items') as FormArray
}
2.-创建一个辅助函数,允许我们创建一个formGroup
createGroupItem(data:any=null)
{
data=data || {foodName:'',price:0}
return this.formBuilder.group({
foodName:data.foodName,price:data.price
})
}
在 setValue 之前,您需要向 formArray 添加许多元素作为“项目”
setValue() {
//before setValue,to a FormArray you need that the
//formArray has as many element as the data
this.restuarantService.selectedProduct.Items.forEach(
x=>this.itemsArray.push(this.createGroupItem()))
//if the object not match exactly with the object use patchValue,not setValue
//see how we pass the "Items",simply indicate the items
this.itemUpdateForm.patchValue({
name: this.restuarantService.selectedProduct.name,Items: this.restuarantService.selectedProduct.Items
});
}
.html
<!--a div with formArrayName-->
<div formArrayName="Items">
<!--iterating over the formArray.controls using the getter
and use [formGroupName] -->
<div *ngFor="let control of itemsArray.controls;let i=index"
[formGroupName]="i">
<!--the inputs with formControlName,see that in this case
is not enclosed by []-->
<input formControlName="foodName">
<input formControlName="price">
</div>
</div>
您的 forked stackblitz 与更改
注意:我真的很喜欢创建一个完全返回 formGroup 的新函数
createGroup(data:any=null)
{
data=data ||{name:'',Items:null)
return this.formBuilder.group({
name:data.name,Items:data.items?this.formBuilder.array(
items.map(x=>this.createGroupItem(x)):
this.formBuilder.array([])
})
}
在 ngOnInit() 中
itemUpdateForm=this.createGroup(his.restuarantService.selectedProduct)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。