Angular 6, this.formGroup.updateValueAndValidity() not working properly
updateValueAndValidity()
is bottom-up, so if you call this method over a control, it will check only validations of this control and their parents, but not their children.
For more details, see AbstractControl#updateValueAndValidity on github to how it works.
updateValueAndValidity(opts: {onlySelf?: boolean, emitEvent?: boolean} = {}): void {
this._setInitialStatus();
this._updateValue();
if (this.enabled) {
this._cancelExistingSubscription();
(this as{errors: ValidationErrors | null}).errors = this._runValidator();
(this as{status: string}).status = this._calculateStatus();
if (this.status === VALID || this.status === PENDING) {
this._runAsyncValidator(opts.emitEvent);
}
}
if (opts.emitEvent !== false) {
(this.valueChanges as EventEmitter<any>).emit(this.value);
(this.statusChanges as EventEmitter<string>).emit(this.status);
}
if (this._parent && !opts.onlySelf) {
this._parent.updateValueAndValidity(opts);
}
}
I stumbled upon this last week too, and I came to the conclusion that this is the expected behavior. The docs states the following:
By default, it also updates the value and validity of its ancestors.
Note that it says "ancestor" and not "descendants". This means that when you have run updateValueAndValidity()
on control1
and control2
, and they're both valid, myForm
will be marked as valid too.