How to update a nested reactive form based on input value

Question

For my scenario, I am using angular reactive forms. I have a list of dependents and each dependent has to fill up some details. I need to have a form for each dependent. The model for dependent is as follows:

export class Dependent {
    surname: string;
    othNames: string;
    nid: string;
    dateOfBirth: string;
    relationship: string;
    netIncExempt: number;
    exemptDiv: number;
    exemptInt: number;
    exemptOth: number;
    exemptEmol: number;
    balance: number;
}

I need to calculate a total for each form based on the input values. See the html below


  
    
      
        
          Dependent {{i+1}}: {{dependent.controls["nid"].value}}
          
        
      
      
        
          Net Income and exempt Income (Rs)
          
            
          
        
        
          {{dependent.controls['netIncome'].errors.threshold.value}}
        
        
          Less: Exempt dividends (Rs)
          
            
          
        
        
          Less: Exempt interest (Rs)
          
            
          
        
        
          Less: Other exempt income (Rs)
          
            
          
        
        
          Less: Emoluments (Rs)
          
            
          
        
        
          Balance

The control balance hwich is a read-only field is calculated based on the input values of the other control values. The dependentsArray is populated based on the number of dependents. See below

if (this.dependentList.length > 0) {
  //this variable count represents the index of each dependent as it depends on the threshold
  let count = 0;
  this.dependentList.forEach((dep: Dependent) => {
    this.dependentsArray.push(this.fb.group({
      nid: [dep.nid],
      netIncExempt: [null, [Validators.required, validateThreshold(count)]],  //validators for dependents
      exemptDiv: [null, Validators.required],
      exemptInt: [null, Validators.required],
      exemptOth: [null, Validators.required],
      exemptEmol: [null, Validators.required],
      balance: [null]
    }));
    count++;
  });
}

Where I am stuck now is how to update the value of balance when the user is going to enter the other values such as net income. To be able to update a reactive form control, to my knowledge we can use patchvalue or setvalue method. What I am doing is subscribe to the form valuechanges, get each control value, create the appropriate model and then update back the form for each dependent. See below.

subscribeToFormChanges() {
    let dependentTemp: Dependent;
    let idx: number = 0;
    this.dependentIncomeForm.valueChanges.subscribe((data) => {
      data.dependentsArray.forEach((item: Dependent) => {
        dependentTemp = this.dependentList.find((dep:Dependent) => dep.nid === item.nid);
        dependentTemp.netIncExempt = +item.netIncExempt || 0;
        dependentTemp.calculateBalancePerDependent();
        //this.updateDepForm(idx, dependentTemp.balance);
        idx++;
      });
      this.incomeDep.calculateBalForAllDependents();
    });
  }

  updateDepForm(idx: any, balance: number) {
    let formGroup = this.dependentsArray.controls[idx] as FormGroup;
    formGroup.controls["balance"].patchValue(balance);
  }

The line that is commented in the subscribeToFormChanges method is giving me the following error maximum call stack size exceeded. I am guessing there is some kind of circular dependency that is going on since I am listening to form changes and then updating it at the same time.

Vega · Accepted Answer

Use {emitEvent: false} option on patchValue, otherwise patchValue will trigger the value change intercepted by valueChanges.subscrbe...

If emitEvent is true, this change will cause a valueChanges event on the FormControl to be emitted. This defaults to true (as it falls through to updateValueAndValidity).

formGroup.controls["balance"].patchValue(balance,{emitEvent: false});

Simple Demo

How to update a nested reactive form based on input value

Answers (1)

Related Questions