Click here to Skip to main content
15,877,966 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I have created a component(set-pass),I want to perform password and confirm password activities in this component.I have tried it by creating a custom directive(confirm-equal-validator.directive.ts) inside shared folder.

Below are my component files

set-pass.component.html

<form >
     <mat-form-field >
       <input matInput name="password" placeholder="New password" [type]="hide ? 'password' : 'text'" [formControl]="passFormControl" required>

       <mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility' : 'visibility_off'}}</mat-icon>
       <mat-error *ngIf="passFormControl.hasError('required')">
           Please enter your newpassword
         </mat-error>
     </mat-form-field>

     <mat-form-field >
       <input matInput name="confirmPassword"  appConfirmEqualValidator="password"  placeholder="Confirm password" [type]="hide ? 'password' : 'text'" [formControl]="confirmFormControl" #confirmPasswordControl="ngModel" required>

       <mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility' : 'visibility_off'}}</mat-icon>
       <mat-error *ngIf="confirmFormControl.hasError('required')">
         Confirm your password
         </mat-error>
         <mat-error *ngIf="confirmFormControl.hasError('notEqual')">
           Confirm your password
           </mat-error>
     </mat-form-field>
  </form>


set-pass.component.ts

import {Component, OnInit } from '@angular/core';
    import {FormControl, FormGroupDirective, NgForm, Validators} from 
         '@angular/forms';
    import {ErrorStateMatcher} from '@angular/material/core';

     @Component({
       selector: 'ylb-set-pass',
       templateUrl: './set-pass.component.html',
       styleUrls: ['./set-pass.component.css']
       })
     export class SetPassComponent {

        passFormControl = new FormControl('', [
        Validators.required,
         ]);
           confirmFormControl = new FormControl('', [
          Validators.required,
        ]);
   }


2

What I have tried:

<pre lang="text">
import { Validator,AbstractControl,NG_VALIDATORS } from '@angular/forms';
    import { Directive,Input} from '@angular/core';



    @Directive({
       selector: '[appConfirmEqualValidator]',
       providers: [{
            provide: NG_VALIDATORS,
            useExisting: ConfirmEqualValidatorDirective ,
            multi:true
        }]
     })

   export class ConfirmEqualValidatorDirective implements Validator{
     @Input() appConfirmEqualValidator:string;
      validate(control: AbstractControl):{[key:string]:any} | null{
        const controlToCompare = 
    control.parent.get(this.appConfirmEqualValidator);
        if(controlToCompare && controlToCompare.value !== control.value){
           return{'notEqual':true};
         }
         return null;
       }
     }


I have imported this component in app.module.ts like this

import { ConfirmEqualValidatorDirective } from './shared/confirm-equal-validator.directive';

I have followed every steps properly given in this video

https://www.youtube.com/watch?v=YhazkQd59Hk

I want to achieve confirm password through material components only, like this I want confirm password field also.But i am unable achieve confirm password and i want error text regarding password mismatch.I have many links but they are doing with bootstrap input components.I want it using materials only
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900