Async Validator causes form control state to be set to valid when other validators are invalid

[buddyackerman]

I'm not sure if this is a bug or not but the behavior doesn't make sense. I'm using a model driven form on my page and one of the controls has two synchronous validators (required and minlength) and a custom asyncValidator. When the page initially loads the form control is empty so it should be failing the required and minlength validations. The custom validator will return valid when the field is empty. However, the state of the control is being set Valid on form initialization. Previously my custom async validator had been a synchronous validator and it worked as expected, i.e. the custom validator is initially valid but the form control is still invalid due to the other validations being invalid.

The following plnkr illustrates the behavior:

http://plnkr.co/edit/VJlg1Q1EXs9mQ8Bx2YTQ?p=preview

Also, note that the after form initialization the async validator only runs after satisfying the minlength requirement (in this case upon typing the 6th character) while the sync validator runs on every key press and the sync validator is run twice on form initialization while the async validator only runs once. Another thing is that the form control with the async validator will report invalid if you type some characters then delete them all making the field empty.

[nick1247]

I think, the problem is that you are mixing templete driven and model driven forms. Please, remove required from html templete and put it to form builder:

this.registrationForm = this.formBuilder.group({
              UserId: ['', [Validators.minLength(6), Validators.required], [this.UserIdExistsAsyncValidator.bind(this)]],
              UserId2: ['', [Validators.minLength(6), Validators.required, this.UserIdExistsSyncValidator.bind(this)]],
        });

[buddyackerman]

It does work when I remove the required attribute from the markup (which of course breaks my styling as it relies on the required attribute, i.e. .ng-valid[required]) but I don't see why that should make a difference between they types of validators being used. All the async validator does is add an item to the errors array on the control. It shouldn't make any difference if it's added immediately or after some delay.

[nick1247]

Async validators don't start if sync validators returned 'invalid' state. Rely on this
In your case, form has only minlength validator, that is valid if control value is empty, so async validator start working and return 'valid' state.

I don't know is mixing template and model validators a good path, but as you can see it doesn't work as expected.

I think all validation should be at one place, at html template or at form model.

[buddyackerman]

The problem is that the async validator DID run on form initialization and the async validator's result was apparently the only result considered in the control's state even though required and minlength failed. I've removed the required attribute (and had to add my own dummy attribute to get my css to work) from the form controls but I don't see any reason that this shouldn't have worked in the first place.

[xban1x]

Possibly a duplicate of #12709?

[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.}