javascript - 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 数组，因此您可以通过其索引访问它。

Had created a Stackblitz Demo for your reference

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