Angular form updateValueAndValidity of all children controls

Question

In my Angular 4 app, I have a form with several controls.

At some points I need to force the update of their validity, so I\'m doing:

this.form.get(\         


        

Answer 1

I ran into the same problem, one of the issues was that listening to the valueChanges observable and triggering updateValueAndValidity to run my validators caused an endless loop, so to resolve (and somewhat hacky ?) I created the component variable validityCycleFired and initialized as false, that I toggle and it prevents a runaway loop:

const fireValidityCheck = () => {
     if (this.validityCycleFired) return;
     this.validityCycleFired = true;
     this.passwordForm.get('old_password').updateValueAndValidity();
     this.passwordForm.get('new_password').updateValueAndValidity();
     this.passwordForm.get('confirm_new_password').updateValueAndValidity();
     setTimeout(() => this.validityCycleFired = false, 15);
     return;
};
this.passwordForm.valueChanges.subscribe(fireValidityCheck);