Custom validator

As we can see by looking at the highlighted lines, there are two new validators that we used to check the email and password given by the user: the Validators.email--which has obviously been attached to the Email form control--and the passwordConfirmValidator(), which we attached to the whole FormGroup.

The first one is built-in in Angular, while the latter is a custom validator that we put together to compare the Password and PasswordConfirm fields and keep the user informed of their respective value. As we can see, we chose to attach it to the whole form group, because it needs to check two controls at the same time; hence, we need it to trigger whenever either of them changes its value.

The validator itself does nothing fancy; it retrieves the two form controls using the get() method, then--if both of them exist--compare their values; if they do match, it sets an error to the PasswordConfirm control, otherwise it clears it. Note how we could've set the error globally by adding it on the root form control instead, yet we preferred to turn on the red light over the PasswordConfirm control instead; that way, our users will have a better visual hint on what they need to do.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.144.19.243