valueChanges and statusChanges in Angular

valueChanges() and statusChanges() are the properties of  FormControl, FormArray and FormGroup classes. valueChanges() and statusChanges() both return Observable instance and we can subscribe  them to get data. To create a reactive form we create a instances of FormGroup and FormControl classes.

Both these classes are derived from the base AbstractControl classes and this class exposes the property called valueChanges. SInce both FormGroup and FormControl classes inherit from AbstractControl class.

valueChanges()

• valuesChanges() Property is an observable that emits an event every time the value of a FormGroup or FormControl changes.

• valueChanges() property is also available on both these class instances that is FormGroup and FormControl.
  
    

•  If we subscribe valueChanges of a FormControl instance, we get latest value of that control whenever there is any change.

• If we subscribe valueChanges of a FormArray  instance, we get latest value of those array controls whenever there is any change.

•  If we subscribe valueChanges of a FormGroup  instance, we get latest value of the Form controls whenever there is a change in any control of the form.

Now for us to be able to monitor and react when the FormGroup or FormControl  value changes we obviously have to subscribe to the valueChanges observable by using it subscribe method.

 Subscribing to valueChanges Observable - 

      

Output -

       

In this, we get the latest value of one Form Control of a FormGorup.

Notice in this example -

• we are using the get method to get a reference to this  company_name FormControl that is present inside this FormGroup profile_form. Once we have a reference to that company_name FormControl we are using the valueChanges property and subscribing to its observable using the subscribe method.

• Now since we are subscribed to the observable everytime the value of company_name FormControl changes either the programmatically or in the UI that changed value gets passed  to the subscribe method and then this anonymous function that we have specified right here as a parameter will get executed.

So what we are doing here we are binding tthe property to the view. So everytime the value of the company_name FormControl  changes it gets bind to the view.

 Using FormGroup instance -

      

Output -

      

 In this, we get the latest value of all Form Controls of a FormGorup.

So subscribing to valueChanges Observable and thereby monitoring  a FormGroup or FormControl allows us to do several things - 

• Implementing Autocomplete feature and dynamically validating FormGroups and FormControls.

• Also at the moment to create any component all the validation messages and the logic in the view template by subscribing to this valueChanges observable.

statusChanges()

• stausChanges is a property of AbstractControl that emits an event every time when the validation status of the control is recalculated.

• statusChanges property is available in FormControl, FormArray and FomGroup classes because they inherit AbstractControl class.

• If we subscribe stausChanges of a FormControl instance, we get latest validation status of that control whenever validation status is recalculated for that control.

• If we subscribe stausChanges of a FormArray  instance, we get latest validation status  of those array controls whenever validation status is recalculated for those array controls.

• If we subscribe stausChanges of a FormGroup  instance, we get latest validation status of the Form controls whenever  validation status is recalculated in any control of the form.

 Subscribing to statusChanges Observable - 

          

Output -

          

In this, we get the validation status of one Form Control of a FormGorup.

Using FormGroup instance -

         

In this, we get the Validation Staus of all Form Controls of a FormGroup .

Conclusion

Both of these helps to separate the component models with the help of controls and group these for easy understanding and targeting to fulfill the specific model operations. we can detect and enable conditional validation on basis of that.