在Angular 6中确认密码验证 [英] Confirm password validation in Angular 6

问题描述

我只想使用材料组件执行密码和确认密码验证，并在确认密码字段(如果confirm password field doesn't match和if it is empty).尝试了许多无法实现的资源.

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.

也尝试过此视频.

这是我正在寻找的重要组成部分

This is the material component i am looking for

HTML

     <mat-form-field >
        <input matInput  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  placeholder="Confirm password" [type]="hide ? 
              'password' : 'text'" [formControl]="confirmFormControl" 
                    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-form-field>

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;

       }

正在验证以下条件是否正常 1)如果密码和确认密码字段为空，则显示错误文本.

It's validating the following conditions fine 1)If password and confirm password fields are empty its showing error text.

我想与(.ts)文件中的字段进行比较，例如其如何验证空白字段，如果确认密码字段为空，则会出现错误.

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.

推荐答案

可以通过结合以下两个答案来解决此问题: https://stackoverflow.com/a/43493648/6294072 和 https://stackoverflow.com/a/47670892/6294072

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
  let pass = group.get('password').value;
  let confirmPass = group.get('confirmPass').value;

  return pass === confirmPass ? 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: ['']
}, {validator: this.checkPasswords })

，然后如其他答案所述，mat-error仅显示 FormControl 是否无效，因此您需要一个错误状态匹配器:

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 && control.invalid && control.parent.dirty);
    const invalidParent = !!(control && control.parent && control.parent.invalid && control.parent.dirty);

    return (invalidCtrl || invalidParent);
  }
}

在上面的

中，您可以调整何时显示错误消息.我只会在触摸password字段时显示消息.我在上面也想从confirmPassword字段中删除required验证器，因为如果密码不匹配，则该表单仍然无效.

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.

然后在组件中，创建一个新的ErrorStateMatcher:

Then in component, create a new ErrorStateMatcher:

matcher = new MyErrorStateMatcher();

最后，模板将如下所示:

Finally, the template would look like this:

<form [formGroup]="myForm">
  <mat-form-field>
    <input matInput placeholder="New password" formControlName="password" required>
    <mat-error *ngIf="myForm.hasError('required', 'password')">
        Please enter your new password
    </mat-error>
  </mat-form-field>

  <mat-form-field>
    <input matInput placeholder="Confirm password" formControlName="confirmPassword" [errorStateMatcher]="matcher">
    <mat-error *ngIf="myForm.hasError('notSame')">
        Passwords do not match
    </mat-error>  
  </mat-form-field>
</form>

这是一个使用上面的代码的演示:

Here's a demo for you with the above code: StackBlitz

这篇关于在Angular 6中确认密码验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！