Asynchronous validator overrides validation result from synchronous validator

[NiklasJFischer]

• I'm submitting a ...
• [x ] bug report
• feature request
• support request => Please do not submit support request here, see note at the top of this template.

Current behavior
When adding both synchronous and asynchronous validators to a control, the control is in valid state after the asynchrous validator is done even though the synchronous validator says invalid. For example if you have the "required" validator and a custom asynchrouns validator that takes 2 seconds to complete and you erase all text during these 2 seconds the control is in valid state after the 2 seconds.

Expected/desired behavior
The control should be in invalid state because of the "required" validator.

• If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via
  1. Create a form with an input type="text"
  2. Add a control to that input with the "required" validator and a custom asynchronouns validator that takes 2 seconds to complete.
  3. Write some text in the input control to trigger the asynchrouns validator and then erase all text before it completes
• What is the expected behavior?
  The control should be in invalid state and not valid state because of the "required" validator
• What is the motivation / use case for changing the behavior?
  Form validation should work with asynchronous validators
• Please tell us about your environment:
• Angular version: 2.0.0-beta.17
• Browser: [Chrome 50 | IE 11]
• Language: [TypeScript 1.7.3 | ES5 ]

[zoechi]

Sounds similar to #8118

[nukefusion]

Just ran into this myself. The workaround I'm using for the time being is to wrap the synchronous validators in a promise and pass them all together as async validators using composeAsync. For example (I'm using TypeScript):

this.username = new Control("", null, Validators.composeAsync([ (control: Control) => Promise.resolve(Validators.required(control)), (control: Control) => this.usernameDoesNotExistValidator(control) ]));

[pkozlowski-opensource]

Yup, definitively a bug and one still present in RC6: https://plnkr.co/edit/y10r0ETIKShfVCqX91LP?p=preview

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}