我不知道如何重置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"
”字段,同时保留value和valueRel字段不变
我尝试过:
this.fixedPointsControl.reset(["score"]);
但是它的作用是重置所有与上一个表达式相同的内容,所以什么都没有改变!
重置formArray的特定字段的正确方法是什么?
答案 0 :(得分:2)
如果FormArray内部有4个字段,则可以通过其索引重置它,因为FormArray内部是FormGroup的数组,因此可以通过其索引访问它。
已经创建了一个Stackblitz Demo供您参考
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: '' }));
答案 1 :(得分:1)
只需创建一个pairs
吸气剂即可获得pairs
FormArray
。现在,在resetField
方法中设置一个名为fieldName
的参数,该参数希望将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>
这是您推荐的Working Sample StackBlitz。