With Angular 16, why errors from async validators aren't displayed?

103 Views Asked by At

I have a weird behavior with async validators from Angular. Here's the context (this is an example, not the best use case here but that's not the issue ^^) :

  1. I have a form with a ngModelGroup inside.
  2. I use a nested component to handle password input and verificationPassword input.
  3. I need to validate in some case that password are the same. So I create a validator to check this and I add it on the ngModelGroup.
  4. In the template, I check the errors from ngModelGroup and if there's one, I display the error message.

I've added a delay on my validator to simulate some http call.

When I write in my password's inputs now and I leave the input before the observable complete, nothing happen in the template. In the console, I can see the error which is rised but not in the template.

If I wait in the input (focus in) until the error is rised and I focus out after, the error is displayed in the template.

It seems that error from the validator is not push in the userGroup.errors. I've read the async or not the way to get the errors in the template is the same, no need to subscribe (btw subscribe to what...)

Here's the stackblitz to reproduce the issue

With or without nested component, this issue remain.

I haven't tried this scenario with ReactiveForms because we don't use it...

Any idea about this? Did you encountered this issue? Have you solved it? :)

0

There are 0 best solutions below