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:
- Using the power of Observables
- 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
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.