Are there any reasons why adding a validator overwrites the existing async validator?
I use Angular 12 and addValidator() on formGroup. The docs say: "without affecting other validators."
As soon as I add the validator, async validator did not fire any more.
public testValidator(): AsyncValidatorFn {
return (control: AbstractControl): Observable<ValidationErrors | null> => {
return of({wrongAuthority: 123});
}
}
public authorityValidator(control: AbstractControl) {
return {wrongAuthority: 12333};
}
this.form = this._fb.group({...}, { asyncValidators: this.testValidator()});
this.form.addValidators(this.authorityValidator);
this.form.updateValueAndValidity();
Investigation of Angular code provide some results:
(this as {errors: ValidationErrors | null}).errors = this._runValidator();
(this as {status: FormControlStatus}).status = this._calculateStatus();
if (this.status === VALID || this.status === PENDING) {
this._runAsyncValidator(opts.emitEvent);
}
As you can see sync validator executes first and sets the status of control then if he throws an error async validator is ignored by the value of status. That makes sense.