Password and confirm password validation

Ionic Framework ionic-v3
9

I managed to do that, you can use the following module:

Or write your own:

Here is my code:
inside my constructor:

this.userForm = formBuilder.group({
      firstName: ['', Validators.required],
      lastName: ['', Validators.required],
      email: ['', Validators.compose([Validators.required, SignUpPageComponent.emailValidator])],
      password: ['', Validators.compose([Validators.required, Validators.minLength(6), Validators.maxLength(12), Validators.pattern('^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{6,12}$')])],
      confirmPassword: ['', Validators.required],
    }, {validator: this.matchingPasswords('password', 'confirmPassword')}); 


matchingPasswords(passwordKey: string, confirmPasswordKey: string) {
    // TODO maybe use this https://github.com/yuyang041060120/ng2-validation#notequalto-1
    return (group: FormGroup): {[key: string]: any} => {
      let password = group.controls[passwordKey];
      let confirmPassword = group.controls[confirmPasswordKey];

      if (password.value !== confirmPassword.value) {
        return {
          mismatchedPasswords: true
        };
      }
    }
  }

Inside the template:

      <ion-item class='form-text error' *ngIf="userForm.controls.password.touched && !userForm.controls.password.valid">
        <ion-label no-margin stacked wrap-text>Password must be between 6 and 12 characters with at least one capital letter, one small letter, and one digit.</ion-label>
      </ion-item>
      <ion-item>
        <ion-label stacked>Re-enter Password</ion-label>
        <ion-input type="password" [(ngModel)]="confirmPassword" formControlName="confirmPassword"
                   required show-password></ion-input>
      </ion-item>
      <ion-item class='form-text error' *ngIf="userForm.controls.confirmPassword.touched && userForm.hasError('mismatchedPasswords') && userForm.controls.password.valid">
        <ion-label no-margin stacked>Passwords do not match</ion-label>
      </ion-item>
11 Likes