Material async error message not showing

ironbirdie commented 4 years ago

I'm submitting a


[x] Bug / Regression
[ ] Feature Request / Proposal

I'm using


NG Dynamic Forms Version: `X.Y.Z`

[ ] Basic UI
[ ] Bootstrap UI  
[ ] Foundation UI
[ ] Ionic UI
[ ] Kendo UI
[x] Material  
[ ] NG Bootstrap
[ ] Prime NG

Description

I have a async-validator which checks whether the value of a control exists in the database. The value is checked and the error is returned, but I can only see the error-message when I go out the input-field (control) and focus on it again. When i use it in a normal ReactiveForm it works correctly, but with the dynamic-form I don't see the error-message immediately after the validator is finished.

export function existingCentrumValidator(centrumService: CentrumService): AsyncValidatorFn { return (control: AbstractControl): Promise<ValidationErrors | null> | Observable<ValidationErrors | null> => { return timer(400).pipe(switchMap(() => { if (control.value && control.value.length !== 0) { return centrumService.existingCentrum(control.value) .pipe(map(centrumExists => centrumExists ? null : {existingCentrumValidator: true})); } return of(null); })); }; }

After input and validator finished:

after input