Angular 2 Reactive Forms Validations

Following the tuts on Reactive Forms and  Observables, today we tackle the validation part!

This part is very important, it’s your last protection before the data are sent to your server so be careful here.
Two ways to do the work:

  1. Using the power of Observables
  2. Using Form Controls

Let’s modify a bit the template from the previous post:

We only add a field that will be displayed if we have an error in our userForm.

The Observable Way

Back to our Component’s code.
Angular 2 is Observable-Friendly, we can subscribe and listen to many changes now!

To keep it simple, we are only going to use the input name.
We stock the name Controls into a new const named nameControl.
Then we subscribe to the value changes.
Every time the input changes, we make a very basic check, if the input is empty we set a new error that will be named required.

And that’s it, the name input can’t be empty anymore!

The Control Way

Now let’s do the same work by only adding one import, two words and two brackets:

Ahah yes it’s faster isn’t it?
Angular 2 provides basic Validators that we can import and use when creating our form’s Controls (here the name Control).

So how can we create a custom Validator?
Very simple, just pass it a function!

The validateName function will be called every time that the name input is modified.
We get the form’s value and recreate our required restriction.
The most important part here is that a value needs to be returned:

  • Null if there is no error and everything is good
  • Or an object representing the errors
Subscribe to my mailing list to get access to a Free 7-day Ionic 3 introduction email course!
100% Privacy. I'll never spam you!

Conclusion

If you only need some basic validations, I advise you to go with the default ones here.
Otherwise you can choose between Observables and functions to design your validation system.
Observables are very cool to use but I’d personally go with functions, every requirement are declared while creating the form so if you use meaningful names, the whole validation system can be understood in one look without even checking inside the functions.

No Comments Yet

Leave a Reply

Your email address will not be published. Required fields are marked *

3 Shares