密码匹配错误为真，但未显示错误消息答案

【问题标题】：The Password match error is true still the error message does not get displayed密码匹配错误为真，但未显示错误消息
【发布时间】：2021-02-17 14:28:33
【问题描述】：

密码和确认不匹配，如果表单无效，按钮将被禁用，但<mat-error> 中的消息仍不显示

模板文件

<mat-form-field class="full-width" appearance="outline">
            <mat-label>Password</mat-label>
            <input type="password" formControlName="password" matInput required />

            <mat-error *ngIf="AuthForm.get('password').errors">Valid Password required</mat-error>
        </mat-form-field>

        <mat-form-field class="full-width" appearance="outline">
            <mat-label>Password Confirmation</mat-label>
            <input type="password" formControlName="passwordConfirmation" matInput required />

            <mat-error *ngIf="AuthForm.get('password').touched && AuthForm.get('passwordConfirmation').touched && AuthForm.errors"> Passwords dont match!</mat-error>
        </mat-form-field>

        <button [disabled]="AuthForm.invalid" mat-flat-button color="primary">Register</button>

外部类验证器

import { Injectable } from '@angular/core'
import { Validator, FormGroup } from '@angular/forms'

@Injectable({ providedIn: 'root' })

export class MatchPassword implements Validator {
    validate(formGroup: FormGroup) {
       const passwordControl= formGroup.get('password');
       const passwordConfirmControl= formGroup.get('passwordConfirmation')
        if (passwordControl.value != passwordConfirmControl.value) {
            return { passwordsDontMatch: true }
        }
        else {
            return null;
        }
    }
}

组件类

export class AdminComponent implements OnInit {
  AuthForm = new FormGroup({

    email: new FormControl('', [Validators.required, Validators.email, Validators.minLength(10),
    Validators.maxLength(25)]),

    password: new FormControl('', [Validators.required, Validators.minLength(4), 
    Validators.maxLength(20)]),

    passwordConfirmation: new FormControl('', [Validators.required, 
      Validators.minLength(4), 
      Validators.maxLength(20),
      ]
      ) 
  }, {validators : [this.MatchPassword.validate]})

  

  constructor( private MatchPassword: MatchPassword) { }

即使出现错误且密码不匹配，<mat-error> 中的消息也不会显示。

【问题讨论】：

标签： angular validation angular-material angular-reactive-forms

【解决方案1】：

试试这个：

<mat-error  AuthForm.get('passwordConfirmation').hasError('passwordsDontMatch')> Passwords dont match!</mat-error>

【讨论】：

【解决方案2】：

您应该检查当前控制错误而不是 formGroup 错误

不是这个

*ngIf="
  AuthForm.get('password').touched && 
  AuthForm.get('passwordConfirmation').touched && 
  AuthForm.errors
"

试试这个

*ngIf="
  AuthForm.get('password').touched && 
  AuthForm.get('passwordConfirmation').touched && 
  AuthForm.get('passwordConfirmation').errors
"

另外为方便起见，您可以为passwordConfirmation formControl 创建getter

在你的控制器中

export class MyComponent {
  constructor(){}

  get passwordConfirmation() {
    return this.AuthForm .get('passwordConfirmation')
  }

}

并在html中使用

*ngIf="
  passwordConfirmation?.touched && 
  passwordConfirmation?.touched && 
  passwordConfirmation?.errors
"

【讨论】：