Create custom directive for confirm password in angular2+

Question

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

Mahesh Verma · 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 Matched span > span * ngIf = "matchEl.value==0" > Matched span > 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.

Mahesh Verma · Answer

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.

Reena Lakra · Answer

Thanks Mahesh and Manav Sir, @Mahesh Sir your code run perfectly but i don't understand why you are taking one hidden field?

Manav Pandya · Answer

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

Create custom directive for confirm password in angular2+

Answers (4)