Create custom directive for confirm password in angular2+

Reena Lakra

8y793Angular

I want to create a custom directive for confirm password in angular version 2+?

4 Replies

Know the answer? Post it — somebody with the same question will find it here.

Mahesh Verma8y ago
Accepted answer
Hi Reena,

Try this code.....
<div class="row">
  <input type="hidden" #matchEl>
  <input type="password" [(ngModel)]="userName" placeholder="Enter any password" >
  <input type="password" inputFormat [format]="userName" [matchEl]="matchEl" [(ngModel)]="confirmPassword" placeholder="Enter any password" >
  <span *ngIf="matchEl.value==1">Not Matchedspan>
  <span *ngIf="matchEl.value==0">Matchedspan>
div>
Now, in your custom directive file, put this code :
@Input() format:string='';
@Input() matchEl:any;

    textValue:string="";
    @HostListener('blur') onBlur(eventData:Event){
this.textValue=this.eleRef.nativeElement.value;
       if(this.format!=this.textValue)
          this.matchEl.value=1;
       else
          this.matchEl.value=0;
    }
Hope, it will help you.
0
Mahesh Verma8y ago
Hi Reena,

Actually, we have two options, either we use @Output() decorator function and by this, we receive the value in app.component.ts file, and for the second method we use the hidden property to receive this value on our directive file.
0
Reena Lakra8y ago
Thanks Mahesh and Manav Sir, @Mahesh Sir your code run perfectly but i don't understand why you are taking one hidden field?
0
Manav Pandya8y ago
Hello

You can try below solution :

For angular 2 :

https://scotch.io/tutorials/how-to-implement-a-custom-validator-directive-confirm-password-in-angular-2

For angularjs :

https://stackoverflow.com/questions/31039034/custom-angularjs-confirm-password-directive-not-working

https://odetocode.com/blogs/scott/archive/2014/10/13/confirm-password-validation-in-angularjs.aspx

https://blog.brunoscopelliti.com/angularjs-directive-to-check-that-passwords-match/

Thanks
0