如何识别 FormArray 中的哪个项目发出 valueChanges 事件? [英] How to identify which item in FormArray emitted valueChanges event?

问题描述

在Angular中，有没有办法识别动态中的哪个FormGroup/FormControlFormArray 发出了 valueChanges 事件?

In Angular, is there a way to identify which FormGroup/FormControl in a dynamicFormArray emitted the valueChanges event?

我的 FormArray 是动态的.它开始为空，用户可以通过单击按钮将 FormGroup 添加到 FormArray.

My FormArray is dynamic. It starts out empty and users could add a FormGroup to the FormArray by clicking a button.

当valueChanges时，我需要重新验证控件.由于我不知道哪个控件发出了事件，因此我遍历整个 FormArray 并验证所有 FormGroup/FormControl，即使只有一个控件发生了变化 -这是每次数组中的任何内容更改时.我怎样才能避免这样做?

When valueChanges, I need to re-validate the control. Since I dont know which control emitted the event, I loop through the entire FormArray and validate all FormGroup/FormControl even though only one control changed - and this is every time when anything in the array changes. How can I avoid doing this?

        this.myFormArray
        .valueChanges
        .subscribe(data => this.onValueChanged(data));

    onValueChanged(data?: any): void {

    // the data I receive is an entire form array.
    // how can I tell which particular item emitted the event, 
    // so I don’t need to loop through entire array and run validation for all items.

    for (let control in this.myFormArray.controls) {
        // run validation on each control.
    }
}

推荐答案

我通过在 formGroup 中添加一个 formControl(名为 groupIndex)来跟踪索引来解决这个问题并在 formGroup 级别而不是 formArray 级别订阅 valueChanges.在 valueChanges 事件上，我可以访问存储当前索引的 formControl.

I resolved this issue by adding a formControl (named groupIndex) in the formGroup to track the index and subscribing to the valueChanges at the formGroup level instead of formArray level. On valueChanges event, I could then access the formControl that stored the current index.

this.myMainFormGroup = this.myFormBuilder.group({
  // other formControls
  myFormArray: this.myFormBuilder.array([this.addArrayItem()])
});

// this method will be called every time the add button is clicked
addArrayItem(): FormGroup {
  const itemToAdd = this.myFormBuilder.group({
    // dont forget add input control for groupIndex in html for this. It will give error otherwise.
    // i made the input control hidden and readonly
    groupIndex:"", 
    firstName:["", [validator1, validator2]]
    //other formControls

  });

  const myFormArray = <FormArray>this.myMainForm.get("myFormArray");

  //set groupIndex
  itemToAdd.get("groupIndex").patchValue(myFormArray.length -1);

  //subscribe to valueChanges
  itemToAdd.valueChanges
    .debounceTime(200)
    .subscribe(data => this.onValueChanged(data));

  myFormArray.push(itemToAdd);
}

onValueChanged(data?: any): void {
  const groupIndex = data["groupIndex"];

  const myChangedGroup = <FormArray>this.myMainForm.get("myFormArray").controls[groupIndex];

  // now I have hold of the group that changed without having to iterate through the entire array. 
  // run through the custom validator 
  this.generalValidator(myChangedGroup);
}

这篇关于如何识别 FormArray 中的哪个项目发出 valueChanges 事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！