7,634 reads

Implementing A Confirm Password Field in Angular Template Form Without A Custom Validator

by Baher WaelMay 4th, 2020

Too Long; Didn't Read

In this short article I will show you how to use an npm package that does exactly what you need in 3 easy steps without any effort. I hope you enjoyed reading this article, And that it was beneficial to you. Thanks for reading it :)!! I hope to use this article to implement a Confirm Password field in a form using Angular template-driven forms without a custom validator. For example, a confirm password field can be added to a form and a retype field using a validator that produces an error if the two fields aren't matching.

Company Mentioned

featured image - Implementing A Confirm Password Field in Angular Template Form Without A Custom Validator

When you try to make a confirm password or a retype email field using Angular template-driven forms, you might think it will be as easy as using a validate equal attribute that would take the other field's reference or name and produce an error if the two fields aren't matching,

You start searching for this attribute in Angular documentation but you can't find anything, so you turn to stack overflow for answers and you figure out that you have to make it yourself using custom validators, which will cost you some time and effort.

In this short article I will show you how to use an npm package that does exactly what you need in 3 easy steps without any effort.

Step 1:

install ng-validate-equal package

npm i ng-validate-equal

Step 2:

import ValidateEqualModule from 'ng-validate-equal' in your module.ts and add it to the NgModule imports' array

import { ValidateEqualModule } from 'ng-validate-equal';

@NgModule({
  declarations: [],
  imports: [
    ValidateEqualModule
  ],
  providers: [],
})

Step #3:

Make sure you surround your field and its confirmation/retype field in a
```
<form> </form>
```
tag
Give your primary field a name
Use the directive
```
ngValidateEqual
```
on the secondary field and pass the primary field's name to the directive like this
```
ngValidateEqual="primaryFieldName"
```
Look for
```
'notEqual'
```
error in the confirmation field's errors array like this
```
modelConfirmPassword.hasError('notEqual')
```

<!-- form -->
<form>

<!-- password -->
<label>
  Password
</label>

<input type="password" name="passwordFieldName" placeholder="Password" #modelPassword="ngModel" [(ngModel)]="model.password">

<!-- confirm Password -->
<label>
  Confirm Password
</label>

<input type="password" ngValidateEqual="passwordFieldName" #modelConfirmPassword="ngModel" [(ngModel)]="model.confirmPassword" placeholder="Confirm Password">

<div *ngIf="(modelConfirmPassword.dirty || modelConfirmPassword.touched) && modelConfirmPassword.invalid">
    <p class="warning-text" *ngIf="modelConfirmPassword.hasError('notEqual') && modelPassword.valid">
      Passwords Don't Match
    </p>
</div>

</form>