CODEWITHSUNDEEP
angularvalidationasynchronous
Eric Malalel
Eric Malalel

Reputation: 345

angular async validator not triggered on submit if user does not edit form

I have an angular 10 app with a login form where I do different checks on username and password.

These checks are made using an async validator assigned to the formgroup containing the username and password form controls, with updateOn submit.

This async validator runs a REST API call to do the checks and send back error if any.

Everything works fine, except I noticed the following behavior and can't find a workaround.

I enter a username and password, submit the form, and get an error such as "this account is not yet valid" from the async validator.

If I don't touch the form and click again on submit, nothing happens, there is no REST API call.

If I edit any field in the login form, such as adding and removing a character to get back to the original data entered, then when I click on submit, the REST API call is run.

The issue here is that the data sent back by the REST API may have changed. For instance, I may have call a support team and say "please activate my account right now". Then I expect to login by just clicking login again.

So it seems my async validator is triggered only if the form is updated by user, even though I required updateOn submit.

Is this normal or I did something wrong? Is there a way to trigger the async validator on submit, even if form has not been updated?

Upvotes: 0

Views: 1312

Answers (1)

Eric Malalel
Eric Malalel

Reputation: 345

Here is how I finally managed this.

onSubmit(): void {
    if (this.loginFormGroup.untouched) {
      // force validators to run as backoffice validation data may have changed
      this.loginFormGroup.updateValueAndValidity();
    }
    this.loginFormGroup.markAsUntouched();
}

Upvotes: 1

Related Questions