I am upgrading an older Angular app (v7?) all the way up to the latest (v17).

I have a FormGroup with these three FormControls:

username
password
confirmPassword

There are two validators:

1. Sync validator that checks the password and confirmPassword fields match
2. Async validator that contacts the server to do password validation. This has to be a server request because we enforce some rules that depend on the user, like that the user has not used this same password recently, whether their company admin has set up stricter password rules, etc.

In the Angular docs it states

For performance reasons, Angular only runs async validators if all sync validators pass. Each must complete before errors are set.

This seems to be different to how v7 functioned, because my async validators would always fire even if there were sync errors.

I understand this is generally a good thing, but because my password and confirm password have a synchronous validator that checks they match, the user has to type the password they want to use twice before they will be told that it is not valid, which is a weird experience.

I cannot see in the docs any way to change this behaviour for a particular form, control, or validator, so I am about to just turn it into a debounced subscription on value changes and manually set errors on the control, so that it will always run. But I’d rather not do that if it can be avoided – does anyone know if this is configurable?

Thank you!

Tried already:

• Both validators on the FormGroup
• One validator on a FormControl and one on the FormGroup
• Placing both on the individual FormControls
• Making the match validator a ‘faux’ async validator (still seemed to block the real http request one from firing, maybe because it’s too fast?)
• Scouring the docs for options
• Googling