Angular-FormArray，如何重置FormArray的特定字段

Question

我不知道如何重置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的特定字段的正确方法是什么？

Answer 1

如果您的FormArray中有4个字段，您可以通过其索引重置它，因为FormArray中是FormGroup的Array，所以您可以通过它的索引访问它。

为您的参考创建了Stacklitz演示

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: '' }));

Answer 2

只需创建一个pairsgetter即可获得pairsFormArray。现在，在resetField方法中，设置一个名为fieldName的参数，该参数将期望pairsFormArray到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供您参考。