Subscribing to valueChanges for multiple fields is causing performance issue in reactive form angular 2

Question

I have more than 50 fields those are input text and dropdowns in the reactive form. The fields are dependent to each other's value changes in order to trigger validation and to display related field after the selection.

I subscribed to the value changes in ngOnInit() as below:

  ngOnInit() {

    this.setPageValidation();

  }

  setPageValidation() {
    this.NameSubscription = this.FormGroup.get('personnel').get('name').valueChanges.subscribe(data 
      => {
     this.enableOrders();
    });

   this.StateSubscription = this.FormGroup.get('personnel').get('state').valueChanges.subscribe(data 
     => 
    {
      this.enableAccount();
    });
   
    // more value changes subscription like 40 fields ............................
  }

While loading the form, it is taking longer time to load due to subscribing for the value changes when the form loads.

I tried implementing it to move the code to ngOnChanges() but it is not triggering the enable and display of other fields depending on it's initial value that are filled from the table if there are values for those fields. It is just populating the first field and the rest does not display depending upon on its value.

I would like to thank you in advance. I really appreciate your help if there is any best approach to it to resolve without performance issue.

Answer 1

You can do with a single subscription.

this.personnelSubscription = 
  this.Formgroup.get('personnel').valueChanges.subscribe(data => {
     if (data) {
        //Console log the data here. It will print the formGroup of personnel
        // then select the control and add your validations
        // like this data.controls.state
     }
  })