在Angular 6中确认密码验证

<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>

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('',]);

             hide =true;

       }

这个问题可以通过这两个答案的组合来解决： https://stackoverflow.com/a/43493648/6294072和 https://stackoverflow.com/a/47670892/6294072

首先,您需要一个自定义验证器来检查密码,它们可能如下所示：

checkPasswords(group: FormGroup) { // here we have the 'passwords' group
  let pass = group.controls.password.value;
  let confirmPass = group.controls.confirmPass.value;

  return pass === confirmPass ? null : { notSame: true }     
}

并且您将为您的字段创建一个表单组,而不只是两个表单控件,然后为您的表单组标记该自定义验证器：

this.myForm = this.fb.group({
  password: ['',[Validators.required]],confirmPassword: ['']
},{validator: this.checkPasswords })

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

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);
  }
}

在上面你可以调整何时显示错误信息.我只会在触摸密码字段时显示消息.另外我想在上面,从confirmPassword字段中删除所需的验证器,因为如果密码不匹配,表单无论如何都无效.

然后在组件中,创建一个新的ErrorStateMatcher：

matcher = new MyErrorStateMatcher();

最后,模板看起来像这样：

<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>

以下是使用上述代码的演示：StackBlitz