<mat-error>在angular 8应用程序中无法以反应形式工作

问题描述

我正在使用反应性方法来使用角和材质来构建表格。某种程度上，通过自定义验证器生成的错误之一没有出现，而所有其他错误都可以正常工作。 下面是代码。

<div fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="center center" formGroupName="passwords">
    <!--original password-->
    <mat-form-field hintLabel="Should be at least 8 characters long">
        <input type="password" matInput placeholder="Your password" formControlName="password">
        <mat-error *ngIf="signUpForm.get('passwords.password').hasError('required')">
            Passwords cannot be blank
        </mat-error>
        <mat-error *ngIf="signUpForm.get('passwords.password').hasError('minlength')">
            Password has to be atleast 8 characters
        </mat-error>
    </mat-form-field>
    <!--confirmation password-->
    <mat-form-field hintLabel="Should be at least 8 characters long">
        <input type="password" matInput placeholder="Confirm password" formControlName="confirmPassword">
            <mat-error *ngIf="signUpForm.get('passwords.confirmPassword').hasError('required')">
                Passwords cannot be blank
            </mat-error>
            <mat-error *ngIf="signUpForm.get('passwords.confirmPassword').hasError('minlength')">
                 Password has to be atleast 8 characters
            </mat-error>  
            <mat-error *ngIf="signUpForm.get('passwords').hasError('paswordMismatch')">
                Passwords do not match
           </mat-error>
    </mat-form-field>   
</div>

此处无法正常工作。

下面是ts文件

    ngOnInit(): void{
    
        this.signUpForm = this.formBuilder.group({
            studentName: this.formBuilder.group({
                firstName: [null,[Validators.required,Validators.pattern('[a-zA-Z]*')]],middleName: [null,[Validators.pattern('[a-zA-Z]*')]],lastName: [null,[Validators.pattern('[a-zA-Z]*')]] }),email: [null,Validators.email,CustomEmailValidator.forbiddenEmailIds]],userMobNumber: [null,Validators.minLength(10),Validators.maxLength(10)]],studentID: [null,[Validators.required]],passwords: this.formBuilder.group({
                password: [null,Validators.minLength(8)]],confirmPassword: [null,Validators.minLength(8)]]
            },{validator: this.passwordConfirming}),enroledProgram: [null,studentDepartment: [null,facultyDepartment: [null,facultyEmail: [null,Validators.email]],facultyName: [null,funded: [null,[Validators.required]]
            });}
        
          passwordConfirming(c: AbstractControl): { [s: string]: boolean } { 
               console.log(c);
              if (c.get('password').value !== c.get('confirmPassword').value) {
                 return {paswordMismatch: true};
              }
          return null;
        }
    ```

解决方法

应该是

<div fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="center center" formGroupName="passwords">
... 
            <mat-error *ngIf="signUpForm.get('passwords.confirmPassword').hasError('paswordMismatch')">
                Passwords do not match
           </mat-error>
    </mat-form-field>   
</div>

,

创建另一个名为“ password.validator.ts”的文件并编写以下代码：

import { AbstractControl,ValidatorFn } from "@angular/forms";

export function passwordValidator(
  control: AbstractControl
): {
  [key: string]: boolean;
} | null {


  const password = control.get("password");
  const confirmPassword = control.get("confirmPassword");
  if (password.pristine || confirmPassword.pristine) {
    return null;
  }
  return password && confirmPassword && password.value !== confirmPassword.value
    ? { missMatch: true }
    : null;
}

**在表单所在的文件上：添加密码验证器，如下所示**

import { passwordValidator } from "./password.validator";

this.signUpForm = this.formBuilder.group({
            passwords: this.formBuilder.group({
                password: [null,[Validators.required,Validators.minLength(8)]],confirmPassword: [null,Validators.minLength(8)]]
            },{ validators: [passwordValidator]})}