CODEWITHSUNDEEP
angularangular-reactive-formsform-controlformgroupsngonchanges
user21
user21

Reputation: 1351

watch for changes for the formControlNames and how to know which row of the changes in the formGroup for loop - Reactive Form

would like to watch for changes for the formControlNames in the formGroup for loop, but how do I know which index of the for loop that the changes has made. For example, if I want to watch the changes for formcontrolname for 'ruleType', the valueChanges doesn't give the information of which specific row of the changes that was triggered.

I tried the subscription to formGroup.value changes (line 52-58 of app.component.ts at stackblitz) but it doesn't work. I have to comment it and use (line 46-49 of app.component.ts at stackblitz) for loop to loop through the formArray but it doesn't seems to be able to detect changes in the formControlName either. If you have any idea, would greatly appreciate that.

Would like to modify the specific formgroupname for that particular row (specific index of formArray).

My codebase is at : https://stackblitz.com/edit/angular-eazn5i?file=src%2Fapp%2Fapp.component.html

Upvotes: 2

Views: 2226

Answers (1)

Shahar Shokrani
Shahar Shokrani

Reputation: 8762

Because your StackBlitz has console error I've constructed a more simplified version to answer your needs StackBlitz.

I've used closures in order to be able to have access to the current form control that has a value change event:

for (let formGroup of this.myFormGroups) {
  formGroup.get("firstName").valueChanges.subscribe(control => {
    console.log(formGroup);        
  });
}

now you have access to the control's siblings (the other controllers in the same row) by navigating to formGroup.controls.

Upvotes: 1

Related Questions