patchValue not working on FormArray

Question

I am storing FormArray value in ngrx Store whenever any of the control's value changes.

Form Array has 47 Form Groups and each Form Group has a single Form Control.

I have a parent FormGroup which has 10 Form Arrays for 10 different data sets. and those 10 Form Arrays can have various number of FormGroup with a single Form Control.

What I have noticed is that when I change a value of a control. I can see it changing in the valueChange event handler and this is where I am pushing the updated value in ngrx.

if I go to a different data set; I can see in console that master form has the updated value for the control that I changed.

However, if I come back to the same data set; valueChanges gets fired automatically and it is trying to set the older value for the control that I changed.

I have a guard clause to only continue within valueChanges if control is dirty wh ich works in normal situations however, it is creating a situation for me as this time the control is dirty and the older value is written and pushed to ngrx as well.

i need to figure out why valueChanges is getting triggered and why is it getting triggered with the older value when i can see that parent form did have the right value before re-visiting the dataset where I made the change.

On re-rendering, if I am checking if Form Array values exist in ngrx store or not. If yes then I patchValue the FormArray I have with the FormArray values that I previously stored upon value changes.

I can see that form array values coming ngrx store has the update value but when I call

this.formArray.patchValue(formArrayValue);

I see the valueChanges is called but with old values and after patchValue - this.formArray still have the old values.

Am I doing something wrong here or missing something.

Code Snippets

this is how I am creating control within form group and adding them to form Array.

const fg: any = {};     
const rules = this.validationRules.filter(vc => vc.AttributeName.toLowerCase() === prop.key.toLowerCase());

     fg[key] = this.createControl(rules);
         if (value) {
                fg[key].setValue(value,
                 {
                    onlySelf: true,
                    emitEvent: false,
                    emitModelToViewChange: false,
                    emitViewToModelChange: false
                   });
            }

           const formGroup = new FormGroup(fg);
           this.controlsArray.push(formGroup);

This is how i am trying to patch Value my Form Array in ngOnChanges

this.store.pipe(select(fromForms.getFormsState))
.pipe(take(1))
.subscribe(f => {
    const formArray = f.forms.forms[tableName];
    if (formArray) {
        this.controlsArray.patchValue(formArray);
    }
}); 

I will try to add some code snippets if that helps.

Thanks

Answer 1

<mat-form-field>
   <input type="text" matInput placeholder="{{ label }}" [formControlName]="key" [readonly]="!isEditable" [(ngMode)]="value">
</mat-form-field>

I had [(ngMode)]="value" on the input control and I am building a Reactive form. Although my FormGroup did change but when the form got rendered it kept looking at the model which wasn't updated and hence it forced FormGroup to have the older value as well.

So please make sure you check for unnecessary [(ngMode)]="value" .