Angular reactive forms - manually trigger validation of parent FormGroup when child FormGroup changes

javascript angular angular-reactive-forms angular-validation
Chris Halcrow picture Chris Halcrow · May 16, 2018 · Viewed 12.7k times · Source

I have an Angular component that defines an FormGroup, which has a nested FormGroup as one of its controls.

The child FormGroup is passed as an @Input parameter to a child component, and there are validators on some of the controls inside the child FormGroup.

For some reason, the valid property of the parent FormGroup only updates once I update values in the child component, then make a random change to one of the inputs for the parent FormGroup (like adding an extra space to an input).

The setup is fairly complex (validators are added or removed from controls on the child FormGroup depending on certain conditions, which is probably why the validation isn't happening automatically).

How can I manually trigger the parent FormGroup to re-validate as soon as anything in the child FormGroup changes? I tried this in the child component:

ngOnInit()

  this.myForm.valueChanges.subscribe(val => {
      this.myForm.updateValueAndValidity({onlySelf: false, emitEvent: true})
  });

This is supposed to trigger a re-validation of the child FormGroup whenever any of its inputs change, and broadcast the event to the parent component, which should trigger a re-validation of the parent FormGroup. I get some kind of stack overflow error though, as this results in an infinite loop.

How can I trigger the parent FormGroup to re-validate automatically?

Answer

martcs picture martcs · Nov 27, 2019

this.FormGroup.updateValueAndValidity();

updateValueAndValidity() - this is a default method withing FormGroup

Related questions

Custom Validator on reactive form for password and confirm password matching getting undefined parameters into Angular 4

I'm trying to implement a custom validator to check if the password and password confirm are equal. The problem is that the validator is getting undefined password and confirmedPassword parameters. How do I make this work. The function works cause …

Read More
Angular - assign custom validator to a FormGroup

I need to assign a custom validator to a FormGroup. I can do this at the time the FormGroup is created like this: let myForm : FormGroup; myForm = this.formBuilder.group({ myControl1: defaultValue, myControl2: defaultValue }, { validator: this.comparisonValidator }) comparisonValidator(g: FormGroup) { …

Read More
FormControl boolean without default value in angular 2

I'm using reactive forms in angular 2 (4.1.2) I have a boolean property which I don't want to have a default value but it should be required. This is how I create my form: constructor(private fb: FormBuilder) { this.form = this.fb.…

Read More