Angular async validator's state not reflected in form field's error state

Question

I have an an async validator on a zip field:

zip: ['', {
            validators: [
              Validators.required,
              Validators.minLength(5),
              Validators.maxLength(5)
            ],
            asyncValidators: [
              adPostFormValidators.isValidZip(this.locationService)
            ]
          },
      ],

However, the field doesn't seem to reflect the error that comes from the async validator until I click out of the field. For example, this is before I click out (the null is the field's error state):

I know that the async validator has run because I output its results into the console:

Then, when I click out or lose focus, the error state is now accurate:

However, the validator was not run again, as nothing new was logged into the console.

Did you ever find a solution / the cause of this?

Xceno
– Xceno

2018-06-28 09:53:25 +00:00
Commented Jun 28, 2018 at 9:53 — Xceno
– Xceno, Commented Jun 28, 2018 at 9:53
Just added my answer. Hope it helps :)

Moo
– Moo

2018-06-28 21:06:52 +00:00
Commented Jun 28, 2018 at 21:06 — Moo
– Moo, Commented Jun 28, 2018 at 21:06

Moo · Accepted Answer · 2018-06-28 21:06:40Z

6

So it seems that because I'm using ChangeDetectionStrategy.OnPush, I had to manually mark async validators for check:

ref.markForCheck()
return { 'Is not a valid zip': { value: control.value } } as ValidationErrors

where ref is of type ChangeDetectorRef.

answered Jun 28, 2018 at 21:06

Moo

3,7555 gold badges25 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ToastedSoul Over a year ago

Exactly what I was looking for. I had to implement it like here to get it working: github.com/angular/angular/issues/13200#issuecomment-410539106

ToastedSoul Over a year ago

And this solution looks even simpler, probably more closer to what you did: codesandbox.io/s/m430q31xpx (though pusing ChangeDetectorRef into the validatorFn feels kind of less clean)

Collectives™ on Stack Overflow

Angular async validator's state not reflected in form field's error state

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related