0

Below is the structure of the nested form group

   this.userProfileSettingsForm = fb.group({
      general: fb.group({
        language: [],
        theme: []
      }),
      report: fb.group({
        display: [],
        density: [],
      })
    })

If I subscribe to the general group like below, I am getting all property values with the updated one. But I want to get only the property which I updated in the form. For Ex: If I change the property language under general FormGroup, only I want to receive the language property updated value.

    this.userProfileSettingsForm.controls.general.valueChanges.subscribe(
      (value: any) => {
        console.log(value)
      }
    )

Can anyone tell me how can I identify the particular property changes by subscribing to the group?

krrr25
  • 681
  • 2
  • 12
  • 29
  • @kasptom - I understand we can subscribe language property alone to get language control value. My group is quite large, I am trying to use one subscribe for the group and identify the changed property rather than sending all property to update .Do you have any idea how to achieve this? – krrr25 Aug 18 '20 at 18:18
  • Each control in the group can subscribe to the changes event. – JWP Aug 19 '20 at 06:02
  • @John Peters - We cant identify the single property by subscribing to the group? – krrr25 Aug 19 '20 at 06:52
  • You can get formGroup.controls and filter for non pristine conditions. – JWP Aug 19 '20 at 23:52
  • @JohnPeters - Can you share me some sample? – krrr25 Aug 20 '20 at 07:31

1 Answers1

0

You can just make a variable and store the nested formgroup in it. Like we make get functions to access form arrays.

Something like this below.

let addressGroup = this.personalInfoForm.controls['address'] as FormGroup; addressGroup.controls['country'].valueChanges.subscribe(res => { this.getStates() })

Jeet
  • 1
  • 1