[英]Angular - FormArray, how to reset a specific field of a formArray?
我不知道如何重置一个FormArray的单个字段,例如:
myForm = this.fb.group(
{
title: ["", [Validators.required, Validators.minLength(4)]],
date: ["", Validators.required],
pairs: this.fb.array(
this.fPairs.map(f =>
this.fb.group({
score: [],
value: [],
valueRel: []
})
)
)
},
{
validator: minMaxValidator
}
);
所以我的FormArray是4个对象的数组,因为它是从以下位置映射的:
fPairs: Array<fPairs> = [
{score: 0, value: 0, valueRel: 0},
{score: 0, value: 0, valueRel: 0},
{score: 0, value: 0, valueRel: 0},
{score: 0, value: 0, valueRel: 0}
];
到目前为止,重设表单的这一部分所取得的成就是:
pairsControl= this.myForm.controls["pairs"] as FormArray;
然后使用:
this.pairsControl.reset();
但这会重置FormArray的每个字段,而我想要的是只能重置特定字段,
例如所有4个对象的“ score"
字段,而值和valueRel字段保持不变
我尝试了这个:
this.fixedPointsControl.reset(["score"]);
但是它的作用是重置所有与上一个表达式类似的内容,因此没有任何变化!
重置formArray的特定字段的正确方法是什么?
如果您的FormArray内部有4个字段,则可以通过其索引重置它,因为FormArray内部是一个FormGroup数组,因此您可以通过其索引访问它。
已经创建了Stackblitz演示供您参考
const pairs = this.myForm.get['pairs'] as FormArray; // Use 'get' instead of 'controls'
// Iterates the Pairs' FormArray controls and use patchValue if you want to reset or assign a new value to a particular property
pairs.controls.forEach(pair => pair.patchValue({ score: '' }));
只需创建一个pairs
获取器即可获取pairs
FormArray
。 现在,在resetField
方法中设置一个名为fieldName
的参数,该参数希望pairs
FormArray
pairs
FormArray
进行reset
像这样:
get pairs() {
return (<FormArray>this.myForm.get('pairs'));
}
resetField(fieldName) {
this.pairs.controls.forEach(group => group.get(fieldName).reset());
}
然后将这些按钮添加到您的模板中:
<button (click)="resetField('score')">Reset Score</button> |
<button (click)="resetField('value')">Reset Value</button> |
<button (click)="resetField('valueRel')">Reset Value Rel</button>
这是供您参考的工作样本StackBlitz 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.