Sharing Top Content from the Angular-sphere.

Username Availability with an Asynchronous Validator in Angular

  • Asynchronous validators can perform more complex validations that can’t be run synchronously, like hitting a server to check the availability of a username or email.
  • A form that uses this functionality might be built using Angular’s FormBuilder like this: – – I’ve already explained most of how this works in the previous tutorial, however, a lot of people said that they had difficulty getting the validators to work when making a request to a real…
  • I also had trouble initially trying to get the asynchronous validators to delegate the server requests to a provider, rather than performing the HTTP requests inside of the validator itself.
  • In this tutorial, I am going to focus specifically on how to make a real request to a server for validation and also how to get the validator to use an existing function in a provider to handle the request.
  • If you’ve read the previous tutorial, then you may remember that the example validator we created looked like this: – – but now we are going to create a validator that looks like this – – One key difference here is that we have added an decorator because we are…

In this tutorial, I am going to focus on how to make a real request to a server for validation in an Angular form field.

A little while ago I released an article named Advanced Forms & Validation in Ionic where we discussed the concept of using Validators that Angular provides for validating form fields. These validators come in two flavours: synchronous and asynchronous.

Synchronous validators can be used to perform simple synchronous checks like whether a field is empty, whether it exceeds a maximum length, or whether it matches a regex pattern.

Asynchronous validators can perform more complex validations that can’t be run synchronously, like hitting a server to check the availability of a username or email. If you do not understand the difference between synchronous and asynchronous code, I would recommend watching this video first.

A form that uses this functionality might be built using Angular’s FormBuilder like this:

this.myForm = formBuilder.group({ firstName: [‘value’], lastName: [‘value’, *validation function goes here*], age: [‘value’, *validation function goes here*, *asynchronous validation function goes here*] });

I’ve already explained most of how this works in the previous tutorial, however, a lot of people said that they had difficulty getting the validators to work when making a request to a real server (the previous tutorial just makes a “fake” asynchronous request to a server). I also had trouble initially trying to get the asynchronous validators to delegate the server requests to a provider, rather than performing the HTTP requests inside of the validator itself.

In this tutorial, I am going to focus specifically on how…

Username Availability with an Asynchronous Validator in Angular

Comments are closed, but trackbacks and pingbacks are open.