Ionic 2 angular 2 password validation not working?

Ionic Framework ionic-v3
1

How to i validate my password and conform password? I updated my ionic version then this is not working for me…How to i solve my problem?

My system information:

Cordova CLI: 6.5.0
Ionic Framework Version: 2.1.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.1.3
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Linux 4.4
Node Version: v6.10.0
Xcode version: Not installed

2

i’ll send you sample code hope it’s helps you

test.html

 <ion-list no-margin>   
 <ion-item no-margin>

Password
<ion-input type=“password” name=“password” [(ngModel)]=“registerFrm.password” required #password=“ngModel”>

</ion-item>
Retype Password
> > > small style="color:red;" [hidden]="cPassword.valid || (cPassword.pristine && !registerForm.submitted)"> Password mismatch > /small>

Directive:

import { Directive, forwardRef, Attribute } from '@angular/core';import { Validator, AbstractControl, NG_VALIDATORS } from '@angular/forms';@Directive({    selector: '[validateEqual][formControlName],[validateEqual][formControl],[validateEqual][ngModel]',    providers: [        { provide: NG_VALIDATORS, useExisting: forwardRef(() => EqualValidator), multi: true }    ]})export class EqualValidator implements Validator {    constructor( @Attribute('validateEqual') public validateEqual: string) {}
    validate(c: AbstractControl): { [key: string]: any } {        // self value (e.g. retype password)        let v = c.value;
        // control value (e.g. password)        let e = c.root.get(this.validateEqual);
        // value not equal        if (e && v !== e.value) return {            validateEqual: false        }        return null;    }}

add EqualValidator in to app.module.ts

@NgModule({ declarations: [EqualValidator

Try this code

3

Thank you for your reply.

I am using This format of form submit.

home.html

 <form [formGroup]="authForm" (ngSubmit)="submitForm(authForm.value)">
        <ion-item>
            <ion-label floating>Username</ion-label>
            <ion-input type="text" value="" [formControl]="authForm.controls['username']" [ngClass]="{'error-border':!authForm.controls['username'].valid}"></ion-input>         
        </ion-item><br/>
        <div class="error-box" *ngIf="authForm.controls['username'].hasError('required') && authForm.controls['username'].touched">* Username is required!</div>
        <div class="error-box" *ngIf="authForm.controls['username'].hasError('minlength') && authForm.controls['username'].touched">* Minimum username length is 5!</div>
        <div class="error-box" *ngIf="authForm.controls['username'].hasError('maxlength') && authForm.controls['username'].touched">* Maximum username length is 10!</div>
        <!--<div *ngIf="username.hasError('checkFirstCharacterValidator') && username.touched"
            class="error-box">* Username cant't start with number!</div>-->
        <ion-item>
            <ion-label floating>Password</ion-label>
            <ion-input type="text" value="" [formControl]="authForm.controls['password']" ></ion-input>
        </ion-item><br/>
        <div class="error-box" *ngIf="authForm.controls['password'].hasError('required') && authForm.controls['password'].touched">* Username is required!</div>
        <div class="error-box" *ngIf="authForm.controls['password'].hasError('minlength') && authForm.controls['password'].touched">* Minimum username length is 8!</div>
    <div class="error-box" *ngIf="authForm.controls['password'].hasError('checkFirstCharacterValidatorOutput') && authForm.controls['password'].touched">* Password cant't start with number!</div><br/>
<br/>
     
    <button type="submit" ion-button full [disabled]="!authForm.valid">Submit</button>
    </form>

home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { FormBuilder, FormGroup, Validators, AbstractControl } from '@angular/forms';
import { checkFirstCharacterValidator } from '../validators/customValidators';
 
@Component({
  selector: 'page-form',
  templateUrl: 'form.html'
})
 
export class FormPage {
 
        authForm : FormGroup;
 
    constructor(public navCtrl: NavController, fb: FormBuilder) {
        this.authForm = fb.group({
          'username' : [null, Validators.compose([Validators.required, Validators.minLength(5), Validators.maxLength(10)])],
          'password': [null, Validators.compose([Validators.required, Validators.minLength(8), checkFirstCharacterValidator(/^\d/i)])],
          'gender' : 'e'
        })  
    }
     
    submitForm(value: any):void{
        console.log('Form submited!')
        console.log(value);
    }   
 
}