如何验证密码并确认密码匹配?

时间:2018-10-10 11:23:40

标签: angular validation angular-reactive-forms

我需要在应用程序的新用户注册屏幕上验证密码并确认密码匹配。在用户在密码文本字段中完成输入后,一旦用户开始输入确认密码文本字段,我就需要将验证显示为“密码不匹配”。

如果用户正确输入了两个密码,验证错误消息应该被隐藏。我不知道如何实现它。我是Ionic的新手。我不知道这样做。

这是我目前执行的操作:

在我的html中:

<ion-item no-lines>
    <ion-icon name="md-key" class="iconstyle" item-left></ion-icon>
    <ion-label color="textcolor" floating>Password</ion-label>
    <ion-input type="text" class="textcolor" [(ngModel)]="vm.password" formControlName="password" [type]="PasswordType"
    maxlength="20" tabindex="2" (keyup)="moveFocus($event,query, false)"></ion-input>
    <ion-icon item-end [name]="PasswordIcon" class="passwordIcon" (click)='togglePassword()'></ion-icon>
</ion-item>
<div class="error-message-signup" *ngIf="formsignup.controls.password.errors && (formsignup.controls.password.dirty || formsignup.controls.password.touched)">
    <span *ngIf="formsignup.controls.password.errors?.required">Password is required</span>
</div>

<ion-item no-lines>
    <ion-icon name="md-key" class="iconstyle" item-left></ion-icon>
    <ion-label color="textcolor" floating>Confirm Password</ion-label>
    <ion-input type="text" class="textcolor" [(ngModel)]="vm.confirmpassword" formControlName="confirmpassword" [type]="ConfirmPasswordType"
    maxlength="20" tabindex="2" (keyup)="moveFocus($event,query, false)"></ion-input>
    <ion-icon item-end [name]="ConfirmPasswordIcon" class="passwordIcon" (click)='toggleConfirmPassword()'></ion-icon>
</ion-item>
<div class="error-message-signup" *ngIf="formsignup.controls.confirmpassword.errors && (formsignup.controls.confirmpassword.dirty || formsignup.controls.confirmpassword.touched)">
    <span *ngIf="formsignup.controls.confirmpassword.errors?.required"> Confirm Password is required</span>
</div>

当前在我的ts文件中,我正在使用以下验证:

ngOnInit() {
    this.initializeValidators();
  }
  initializeValidators(){
    this.formsignup = new FormGroup({
      titlename: new FormControl('', [Validators.required]),
      firstname: new FormControl('', [Validators.required]),
      lastname: new FormControl('', [Validators.required]),
      gender: new FormControl('', Validators.required),
      dob: new FormControl('', Validators.required),
      identificationNumber: new FormControl('', Validators.required),
      primaryno: new FormControl('', Validators.required),
      landline: new FormControl(this.vm.landlinenumber, null),
      mobile: new FormControl('', Validators.required),
      email: new FormControl('', {
        validators: [Validators.required, Validators.pattern(this.emailpattern)]
      }),
      password: new FormControl('', Validators.required),
      confirmpassword: new FormControl('', Validators.required),
      resellerpromocode:new FormControl(this.vm.resellerpromocode, null),
      salespromocode: new FormControl(this.vm.salespromocode, null),

});
    this.formsignup.controls['landline'].markAsTouched();
    this.formsignup.controls['resellerpromocode'].markAsTouched();
    this.formsignup.controls['salespromocode'].markAsTouched();
}

我已创建验证和必填消息。但是我不知道如何进行密码验证和确认密码匹配。

0 个答案:

没有答案