Confirm password validation in Angular 6

Question

I want to perform password and confirm password validations using  material components only and an error message below the confirm password field if confirm password field doesn t match And if it is empty Tried many resources unable to achieve   Tried this video too   This is the material component i am looking for       HTML         lt mat-form-field  gt           lt input matInput  placeholder  New password   type   hide    password                text    formControl   passFormControl  required gt           lt mat-icon matSuffix  click   hide    hide  gt   hide    visibility                visibility off    lt  mat-icon gt           lt mat-error  ngIf  passFormControl hasError  required    gt              Please enter your newpassword           lt  mat-error gt         lt  mat-form-field gt          lt mat-form-field  gt            lt input matInput  placeholder  Confirm password   type   hide                   password     text    formControl   confirmFormControl                       required gt            lt mat-icon matSuffix  click   hide    hide  gt   hide    visibility                      visibility off    lt  mat-icon gt            lt mat-error  ngIf  confirmFormControl hasError  required    gt            Confirm your password            lt  mat-error gt         lt  mat-form-field gt       TS        import  Component  OnInit   from   angular core        import  FormControl  FormGroupDirective  NgForm  Validators  from                 angular forms        import  ErrorStateMatcher  from   angular material core          Component               selector   asd-set-pass               templateUrl     set-pass component html                styleUrls      set-pass component css                       passFormControl   new FormControl                   Validators required                      confirmFormControl   new FormControl                   Validators required                                hide  true              It s validating the following conditions fine 1 If password and confirm password fields are empty its showing error text   I want to compare to fields in   ts  file like how its validating for empty field  and an error to come if confirm password field is empty

User · Answer

My answer is very simple i have created password and confirm password validation using template driiven in angular 6  My html file   lt div class  form-group  gt     lt label class  label-sm  gt Confirm Password lt  label gt     lt input class  form-control  placeholder  Enter Password  type  password   confirm password  ngModel    ngModel    userModel confirm password  name  confirm password  required  keyup   checkPassword  event     gt     lt div  ngIf  confirm password errors  amp  amp   confirm password dirty  confirm password touched  signup submitted   gt     lt div class  error   ngIf  confirm password errors required  gt Please confirm your password lt  div gt     lt  div gt     lt div  ngIf  i  class  error  gt Password does not match lt  div gt   lt  div gt    My typescript file        public i  boolean         checkPassword event            const password   this userModel password          const confirm new password   event target value           if  password     undefined              if  confirm new password     password                this i   true              else               this i   false                                  when clicking on submit button i check whether value of i is true or false  if true       if  this i          return false         else    form submitted code comes here

User · Answer

This solution is for reactive-form  You may have heard the confirm password is known as cross-field validation  While the field level validator that we usually write can only be applied to a single field  For cross-filed validation  you probably have to write some parent level validator  For specifically the case of confirming password  I would rather do   this form valueChanges subscribe field   gt      if  field password     field confirm        this confirm setErrors   mismatch  true         else       this confirm setErrors null             And here is the template    lt mat-form-field gt         lt input matInput type  password  placeholder  Password  formControlName  password  gt         lt mat-error  ngIf  password hasError  required    gt Required lt  mat-error gt   lt  mat-form-field gt   lt mat-form-field gt       lt input matInput type  password  placeholder  Confirm New Password  formControlName  confirm  gt  enter code here       lt mat-error  ngIf  confirm hasError  mismatch    gt Password does not match the confirm password lt  mat-error gt   lt  mat-form-field gt

User · Answer

The simplest way imo    It can also be used with emails for example   public static matchValues      matchTo  string    name of the control to match to       AbstractControl    gt  ValidationErrors   null       return  control  AbstractControl   ValidationErrors   null   gt          return   control parent  amp  amp            control parent value  amp  amp          control value     control parent controls matchTo  value           null             isMatching  false               In your Component   this SignUpForm   this formBuilder group    password   undefined   Validators required    passwordConfirm   undefined                       Validators required            matchValues  password                              Follow up   As others pointed out in the comments  if you fix the error by fixing the password field the error won t go away  Because the validation triggers on passwordConfirm input  This can be fixed by a number of ways  I think the best is   this SignUpForm  controls password valueChanges subscribe      gt      this SignUpForm  controls confirmPassword updateValueAndValidity          On password change  revliadte confirmPassword

User · Answer

Single method for Reactive Forms TYPESCRIPT    All is this method onPasswordChange       if  this confirm password value    this password value        this confirm password setErrors null       else       this confirm password setErrors   mismatch  true               getting the form control elements get password    AbstractControl     return this form controls  password       get confirm password    AbstractControl     return this form controls  confirm password       HTML    PASSWORD FIELD  lt input type  quot password quot  formControlName  quot password quot    gt      CONFIRM PASSWORD FIELD  lt input type  quot password quot  formControlName  quot confirm password quot   change   quot onPasswordChange   quot    gt      SHOW ERROR IF MISMATCH  lt span  ngIf  quot confirm password hasError  mismatch   quot  gt Password do not match  lt  span gt

User · Answer

Just do a standard custom validator and verify first if the form itself is defined  otherwise it will throw an error that says the form is undefined  because at first it will try to run the validator before the form is constructed      form builder private buildForm    void       this changePasswordForm   this fb group           currentPass       Validators required           newPass       Validators required           confirmPass        Validators required  this passwordMatcher bind this                   confirm new password validator private passwordMatcher control  FormControl      s  string   boolean         if           this changePasswordForm  amp  amp           control value     this changePasswordForm controls newPass value                  return   passwordNotMatch  true              return null      It just checks that the new password field has the same value that the confirm password field  Is a validator specific for the confirm password field instead of the whole form   You just have to verify that this changePasswordForm is defined because otherwise it will throw an undefined error when the form is built   It works just fine  without creating directives or error state matchers

User · Answer

It s not necessary to use nested form groups and a custom ErrorStateMatcher for confirm password validation  These steps were added to facilitate coordination between the password fields  but you can do that without all the overhead    Here is an example   this registrationForm   this fb group     username       Validators required     email        Validators required  Validators email      password1        Validators required   control    gt  this validatePasswords control   password1          password2        Validators required   control    gt  this validatePasswords control   password2             Note that we are passing additional context to the validatePasswords method  whether the source is password1 or password2      validatePasswords control  AbstractControl  name  string        if  this registrationForm     undefined    this password1 value           this password2 value                 return null        else if  this password1 value     this password2 value          if  name      password1   amp  amp  this password2 hasError  passwordMismatch              this password1 setErrors null           this password2 updateValueAndValidity            else if  name      password2   amp  amp  this password1 hasError  passwordMismatch              this password2 setErrors null           this password1 updateValueAndValidity                  return null        else         return   passwordMismatch     value   The provided passwords do not match               Note here that when the passwords match  we coordinate with the other password field to have its validation updated  This will clear any stale password mismatch errors   And for completeness sake  here are the getters that define this password1 and this password2     get password1    AbstractControl       return this registrationForm get  password1           get password2    AbstractControl       return this registrationForm get  password2

User · Answer

I found a bug in AJT 82 s answer  Since I do not have enough reputation to comment under AJT 82 s answer  I have to post the bug and solution in this answer   Here is the bug      Solution  In the following code   export class MyErrorStateMatcher implements ErrorStateMatcher     isErrorState control  FormControl   null  form  FormGroupDirective   NgForm   null   boolean       const invalidCtrl      control  amp  amp  control invalid  amp  amp  control parent dirty       const invalidParent      control  amp  amp  control parent  amp  amp  control parent invalid  amp  amp  control parent dirty        return  invalidCtrl    invalidParent           Change control parent invalid to control parent hasError  notSame   will solve this problem   After the small changes  the problem solved     Edit  To validate the Confirm Password field only after the user starts typing you can return this instead  return   invalidCtrl    invalidParent   amp  amp  control valid

User · Answer

You can use this way to fulfill this requirement  I use the below method to validate the Password and Confirm Password    To use this method you have to import FormGroup from  angular forms library   import   FormBuilder  Validators  FormGroup   from   angular forms     FormBuilder Group   this myForm  this formBuilder group     password           Validators compose  Validators required       confirmPassword            Validators compose  Validators required         validator  this checkPassword  password    confirmPassword          Method to Validate two fields    checkPassword controlName  string  matchingControlName  string        return  formGroup  FormGroup    gt            const control   formGroup controls controlName           const matchingControl   formGroup controls matchingControlName           if  matchingControl errors  amp  amp   matchingControl errors mustMatch                   return if another validator has already found an error on the matchingControl             return                       set error on matchingControl if validation fails         if  control value     matchingControl value                matchingControl setErrors   mustMatch  true                 this isPasswordSame    matchingControl status     VALID     true   false            else               matchingControl setErrors null               this isPasswordSame    matchingControl status     VALID     true   false                        HTML  Here I am use personalized isPasswordSame variable you can use the inbuilt hasError or any other    lt form  formGroup   myForm  gt     lt ion-item gt       lt ion-label position  floating  gt Password lt  ion-label gt       lt ion-input required type  text  formControlName  password  placeholder  Enter Password  gt  lt  ion-input gt     lt  ion-item gt     lt ion-label  ngIf  myForm controls password valid  gt         lt p class  error  gt Please enter password   lt  p gt     lt  ion-label gt     lt ion-item gt       lt ion-label position  floating  gt Confirm Password lt  ion-label gt       lt ion-input required type  text  formControlName  confirmPassword  placeholder  Enter Confirm Password  gt  lt  ion-input gt     lt  ion-item gt     lt ion-label  ngIf  isPasswordSame  gt         lt p class  error  gt Password and Confrim Password must be same   lt  p gt     lt  ion-label gt   lt  form gt

User · Answer

You can simply use password field value as a pattern for confirm password field  For Example      lt div class  form-group  gt    lt input type  password    ngModel    userdata password  name  password  placeholder  Password  class  form-control  required  password  ngModel  pattern        d       a-z        A-Z    8      gt    lt div  ngIf  password invalid  amp  amp   myform submitted    password touched   class  alert alert-danger  gt      lt div  ngIf  password errors required  gt  Password is required   lt  div gt      lt div  ngIf  password errors pattern  gt  Must contain at least one number and one uppercase and lowercase letter  and at least 8 or more characters  lt  div gt    lt  div gt   lt  div gt    lt div class  form-group  gt    lt input type  password    ngModel    userdata confirmpassword  name  confirmpassword  placeholder  Confirm Password  class  form-control  required  confirmpassword  ngModel  pattern     password value       gt    lt div  ngIf   confirmpassword invalid  amp  amp   myform submitted    confirmpassword touched   class  alert alert-danger  gt      lt div  ngIf  confirmpassword errors required  gt  Confirm password is required   lt  div gt      lt div  ngIf  confirmpassword errors pattern  gt  Password  amp  Confirm Password does not match  lt  div gt    lt  div gt   lt  div gt

User · Answer

I did it like this  hope this will help you   HTML     lt form  formGroup   addAdminForm  gt                lt div class  form-group row  gt               lt label class  col-sm-3 col-form-label  gt Password lt  label gt               lt div class  col-sm-7  gt                 lt input type  password  class  form-control  formControlName  password   keyup   checkPassSame    gt                  lt div  ngIf  addAdminForm controls  password  invalid  amp  amp  addAdminForm controls  password touched  gt                   lt p  ngIf  addAdminForm controls  password  errors required  class  errorMsg  gt  This field is required  lt  p gt                 lt  div gt               lt  div gt             lt  div gt              lt div class  form-group row  gt               lt label class  col-sm-3 col-form-label  gt Confirm Password lt  label gt               lt div class  col-sm-7  gt                 lt input type  password  class  form-control  formControlName  confPass   keyup   checkPassSame    gt                  lt div  ngIf  addAdminForm controls  confPass  invalid  amp  amp  addAdminForm controls  confPass touched  gt                   lt p  ngIf  addAdminForm controls  confPass  errors required  class  errorMsg  gt  This field is required  lt  p gt                 lt  div gt                 lt div  ngIf  passmsg        amp  amp   addAdminForm controls  confPass  errors  required  gt                   lt p class  errorMsg  gt    passmsg   lt  p gt                 lt  div gt                 lt  div gt             lt  div gt         lt  form gt    TS File    export class AddAdminAccountsComponent implements OnInit      addAdminForm  FormGroup    password  FormControl    confPass  FormControl    passmsg  string      constructor      private http  HttpClient      private router  Router                ngOnInit             this createFormGroup                   ---------------------------------------------------------------------------------------         ------------------------ form initialization -------------------------         ---------------------------------------------------------------------------------------     createFormGroup               this addAdminForm   new FormGroup           password  new FormControl      Validators required            confPass  new FormControl      Validators required                              ---------------------------------------------------------------------------------------         ------------------------ Check method for password and conf password same or not -------------------------         ---------------------------------------------------------------------------------------      checkPassSame           let pass   this addAdminForm value password        let passConf   this addAdminForm value confPass        if pass    passConf  amp  amp  this addAdminForm valid     true            this passmsg               return false         else           this passmsg    Password did not match            return true

User · Answer

I am using angular 6 and I have been searching on best way to match password and confirm password  This can also be used to match any two inputs in a form  I used Angular Directives  I have been wanting to use them      ng g d compare-validators --spec false   and i will be added in your module  Below is the directive   import   Directive  Input   from   angular core   import   Validator  NG VALIDATORS  AbstractControl  ValidationErrors   from   angular forms   import   Subscription   from  rxjs     Directive        tslint disable-next-line directive-selector   selector    compare      providers     provide  NG VALIDATORS  useExisting  CompareValidatorDirective  multi  true      export class CompareValidatorDirective implements Validator        tslint disable-next-line no-input-rename    Input  compare   controlNameToCompare     validate c  AbstractControl   ValidationErrors   null       if  c value length  lt  6    c value     null          return null            const controlToCompare   c root get this controlNameToCompare        if  controlToCompare          const subscription  Subscription   controlToCompare valueChanges subscribe      gt            c updateValueAndValidity            subscription unsubscribe                         return controlToCompare  amp  amp  controlToCompare value     c value     compare   true     null           Now in your component   lt div class  col-md-6  gt                 lt div class  form-group  gt                   lt label class  bmd-label-floating  gt Password lt  label gt                   lt input type  password  class  form-control  formControlName  usrpass   ngClass      is-invalid   submitAttempt  amp  amp  f usrpass errors    gt                   lt div  ngIf  submitAttempt  amp  amp  signupForm controls  usrpass   errors  class  invalid-feedback  gt                     lt div  ngIf  signupForm controls  usrpass   errors required  gt Your password is required lt  div gt                     lt div  ngIf  signupForm controls  usrpass   errors minlength  gt Password must be at least 6 characters lt  div gt                   lt  div gt                 lt  div gt               lt  div gt               lt div class  col-md-6  gt                 lt div class  form-group  gt                   lt label class  bmd-label-floating  gt Confirm Password lt  label gt                   lt input type  password  class  form-control  formControlName  confirmpass  compare    usrpass                   ngClass      is-invalid   submitAttempt  amp  amp  f confirmpass errors    gt                   lt div  ngIf  submitAttempt  amp  amp  signupForm controls  confirmpass   errors  class  invalid-feedback  gt                     lt div  ngIf  signupForm controls  confirmpass   errors required  gt Your confirm password is required lt  div gt                     lt div  ngIf  signupForm controls  confirmpass   errors minlength  gt Password must be at least 6 characters lt  div gt                     lt div  ngIf  signupForm controls  confirmpass   errors  compare    gt Confirm password and Password dont match lt  div gt                   lt  div gt                 lt  div gt               lt  div gt    I hope this one helps

User · Answer

In case you have more than just Password and Verify Password fields  Like this the Confirm password field will only highlights error when user write something on this field   validators ts  import   FormGroup  FormControl  Validators  FormBuilder  FormGroupDirective  NgForm   from   angular forms   import   ErrorStateMatcher   from   angular material core    export const EmailValidation    Validators required  Validators email   export const PasswordValidation       Validators required    Validators minLength 6     Validators maxLength 24       export class RepeatPasswordEStateMatcher implements ErrorStateMatcher     isErrorState control  FormControl   null  form  FormGroupDirective   NgForm   null   boolean       return  control  amp  amp  control parent get  password   value     control parent get  passwordAgain   value  amp  amp  control dirty        export function RepeatPasswordValidator group  FormGroup      const password   group controls password value    const passwordConfirmation   group controls passwordAgain value     return password     passwordConfirmation   null     passwordsNotEqual  true            register component ts  import   FormGroup  FormControl  Validators  FormBuilder  from   angular forms   import   EmailValidation  PasswordValidation  RepeatPasswordEStateMatcher  RepeatPasswordValidator   from  validators         form  any  passwordsMatcher   new RepeatPasswordEStateMatcher    constructor private formBuilder  FormBuilder        this form   this formBuilder group           email  new FormControl     EmailValidation         password  new FormControl     PasswordValidation         passwordAgain  new FormControl            acceptTerms  new FormControl      Validators requiredTrue            validator  RepeatPasswordValidator                register component html   lt form  formGroup   form   ngSubmit   submitAccount form   gt       lt div class  form-content  gt           lt div class  form-field  gt               lt mat-form-field gt               lt input matInput formControlName  email  placeholder  Email  gt               lt mat-error  ngIf  form get  email   hasError  required    gt                  E-mail is mandatory               lt  mat-error gt               lt mat-error  ngIf  form get  email   hasError  email    gt                  Incorrect E-mail               lt  mat-error gt               lt  mat-form-field gt           lt  div gt           lt div class  form-field  gt               lt mat-form-field gt               lt input matInput formControlName  password  placeholder  Password  type  password  gt               lt mat-hint class  ac-form-field-description  gt Between 6 and 24 characters  lt  mat-hint gt               lt mat-error  ngIf  form get  password   hasError  required    gt                  Password is mandatory               lt  mat-error gt               lt mat-error  ngIf  form get  password   hasError  minlength    gt                  Password with less than 6 characters               lt  mat-error gt               lt mat-error  ngIf  form get  password   hasError  maxlength    gt                  Password with more than 24 characters               lt  mat-error gt               lt  mat-form-field gt           lt  div gt           lt div class  form-field  gt               lt mat-form-field gt               lt input matInput formControlName  passwordAgain  placeholder  Confirm the password  type  password   errorStateMatcher   passwordsMatcher  gt               lt mat-error  ngIf  form hasError  passwordsNotEqual     gt Passwords are different  They should be equal  lt  mat-error gt               lt  mat-form-field gt           lt  div gt           lt div class  form-field  gt               lt mat-checkbox name  acceptTerms  formControlName  acceptTerms  gt I accept terms and conditions lt  mat-checkbox gt           lt  div gt       lt  div gt       lt div class  form-bottom  gt           lt button mat-raised-button  disabled    form valid  gt Create Account lt  button gt       lt  div gt   lt  form gt    i hope it helps

User · Answer

This question could be solved with a combination of these two answers  https   stackoverflow com a 43493648 6294072 and https   stackoverflow com a 47670892 6294072 So first of all  you would need a custom validator for checking the passwords  that could look like this   checkPasswords group  FormGroup       here we have the  passwords  group   const password   group get  password   value    const confirmPassword   group get  confirmPassword   value     return password     confirmPassword   null     notSame  true           and you would create a formgroup for your fields  instead of just two form controls  then mark that custom validator for your form group  this myForm   this fb group     password        Validators required      confirmPassword            validators  this checkPasswords     and then as mentioned in other answer  the mat-error only shows if a FormControl is invalid  so you need an error state matcher  export class MyErrorStateMatcher implements ErrorStateMatcher     isErrorState control  FormControl   null  form  FormGroupDirective   NgForm   null   boolean       const invalidCtrl      control  invalid  amp  amp  control  parent  dirty       const invalidParent      control  parent  invalid  amp  amp  control  parent  dirty        return invalidCtrl    invalidParent         in the above you can tweak when to show error message  I would only show message when the password field is touched  Also I would like above  remove the required validator from the confirmPassword field  since the form is not valid anyway if passwords do not match  Then in component  create a new ErrorStateMatcher  matcher   new MyErrorStateMatcher     Finally  the template would look like this    lt form  formGroup   quot myForm quot  gt     lt mat-form-field gt       lt input matInput placeholder  quot New password quot  formControlName  quot password quot  required gt       lt mat-error  ngIf  quot myForm hasError  required    password   quot  gt        Please enter your new password      lt  mat-error gt     lt  mat-form-field gt      lt mat-form-field gt       lt input matInput placeholder  quot Confirm password quot  formControlName  quot confirmPassword quot   errorStateMatcher   quot matcher quot  gt       lt mat-error  ngIf  quot myForm hasError  notSame   quot  gt        Passwords do not match      lt  mat-error gt       lt  mat-form-field gt   lt  form gt   Here s a demo for you with the above code  StackBlitz

[angular] Confirm password validation in Angular 6

Examples related to angular

Examples related to angular-material

Examples related to angular-forms