繁体   English   中英

Angular-FormArray,如何重置formArray的特定字段?

[英]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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM