How to create a custom password match validator in Angular

In Angular, there are two approaches to create forms. One is the template-driven way and the other is reactive way. This post will help you create a custom password match validator working on the template-driven forms.

Although Angular provides built-in validators such as MinValidator, MaxValidator, EmailValidator, CheckboxRequiredValidator, you will need to create your own validators in many cases such as custom password strength validator, custom password match validator, and custom image url validator.

In this post, I will explain how to create a custom validator that validates the value of a password input and the value of a password confirm input are matched for the better user experience.

Custom Match Password Validator

To create a custom validator, run the following command in your Terminal:

ng generate directive match-password

This command will create match-password.directive.ts as follows:

In your @Directive metadata, add the providers key containing an object that owns provide, useExisting, and multi
properties. NG_VALIDATORS is a token for registering additional…