angular9 - Identify value changes from a control in sub form in Angular

Question

I have the component hierarchy as below.

componentA.ts is as below

  this.componentAForm= this.formBuilder.group({
  componentBForm: this.formBuilder.group({
    componentCForm: this.formBuilder.group({
      control1: new FormControl(''),
      control2: new FormControl('')
    }),

ComponentA.html is as below

<componentB [formGroup]="componentAForm.controls.componentBForm"></componentB>

ComponentB.ts is as below

 this.componentBForm= this.controlContainer.control as FormGroup;

componentB.html is as below

<componentC [formGroup]="componentBForm.controls.componentCForm"></componentC>

Now my problem is I need to access the valuechanges in formGroupC inside componentB and do something inside it. Meanwhile while I access the formGroupA in Component A, It should be possible to access all changed (current values of formGroup hierarchy). How can I achieve it.

question from:https://stackoverflow.com/questions/65866647/identify-value-changes-from-a-control-in-sub-form-in-angular

Answer 1

You already have the code in HTML

In component B, you can write this

componentBForm.controls.componentCForm.valueChanges.subscribe((data) => { whatever });