angular - 使用 mat-error 显示自定义验证器错误

Question

我来找你讨论 Angular Material 的问题。事实上，我认为这是一个问题，但我更愿意先寻找误会。

关于我的问题的第一件事是上下文，我尝试做一个包含两个输入的简单表单:密码及其确认。

用户表单.component.ts

this.newUserForm = this.fb.group({
  type: ['', Validators.required],
  firstname: ['', Validators.required],
  lastname: ['', Validators.required],
  login: ['', Validators.required],
  matchingPasswordsForm: this.fb.group(
    {
      password1: ['', Validators.required],
      password2: ['', Validators.required],
    },
    {
      validator: MatchingPasswordValidator.validate,
    },
  ),
  mail: ['', [Validators.required, Validators.pattern(EMAIL_PATTERN)]],
  cbaNumber: [
    '411000000',
    [Validators.required, Validators.pattern(CBANUMBER_PATTERN)],
  ],
  phone: ['', [Validators.required, Validators.pattern(PHONE_PATTERN)]],
}

我的兴趣是匹配PasswordsForm FormGroup。你可以在上面看到验证器。

这里是验证器:

匹配-password.validator.ts

export class MatchingPasswordValidator {
    constructor() {}

    static validate(c: FormGroup): ValidationErrors | null {
        if (c.get('password2').value !== c.get('password1').value) {
            return { matchingPassword: true};
        }
        return null;
    }
}

和 HTML。

user-form.component.html

<div class="row" formGroupName="matchingPasswordsForm">
    <mat-form-field class="col-md-6 col-sm-12">
        <input matInput placeholder="Mot de passe:" formControlName="password1">
        <mat-error ngxErrors="matchingPasswordsForm.password1">
            <p ngxError="required" [when]="['dirty', 'touched']">{{requiredMessage}}</p>
        </mat-error>
    </mat-form-field>

    <mat-form-field class="col-md-6 col-sm-12">
        <input matInput placeholder="Confirmez" formControlName="password2">
        <mat-error ngxErrors="matchingPasswordsForm.password2">
            <p ngxError="required" [when]="['dirty', 'touched']">{{requiredMessage}}</p>
        </mat-error>
        <!--                 -->
        <!-- problem is here -->
        <!--                 -->
        <mat-error ngxErrors="matchingPasswordsForm" class="mat-error">
            <p ngxError="matchingPassword" [when]="['dirty', 'touched']">{{passwordMatchErrorMessage}}</p>
        </mat-error>
        <!-- ^^^^^^^^^^^^^^^^ -->
        <!-- /problem is here -->
        <!--                  -->
    </mat-form-field>
</div>

我用注释包围了有趣的代码。

现在，一些解释:使用标记，当触摸 password2 时，会显示我的错误:

Password2 just touched

但是，当我输入错误的密码时，不再显示错误:

Wrong password2

首先，我以为我误解了自定义验证器的使用。但是当我用整个东西替换时效果很好!

用提示替换错误

<mat-hint ngxErrors="matchinghPasswordsForm">
    <p ngxError="matchingPassword" [when]="['dirty', 'touched']">{{passwordMatchErrorMessage}}</p>
</mat-hint>

With mat-hint tag

我希望我说的很清楚，在 Material 设计 github 上发布问题之前，我真的很想知道您的观点。

如果我误解了什么，请点燃我错过的东西。

最后一件事，我的测试是用 ngxerrors 和 *ngif 完成的。为了更具可读性，我的代码示例仅使用 ngxerrors 。

提前感谢您抽出宝贵的时间。

Answer 1

Alex是正确的。您必须使用 ErrorStateMatcher。我必须进行大量研究才能弄清楚这一点，但没有一个来源可以给我完整的答案。我必须拼凑从多个来源学到的信息，以自己解决问题。希望下面的例子能让你免于我所经历的头痛。
表格
这是一个使用 Angular Material 元素作为用户注册页面的表单示例。

<form [formGroup]="userRegistrationForm" novalidate>

    <mat-form-field>
        <input matInput placeholder="Full name" type="text" formControlName="fullName">
        <mat-error>
            {{errors.fullName}}
        </mat-error>
    </mat-form-field>

    <div formGroupName="emailGroup">
        <mat-form-field>
            <input matInput placeholder="Email address" type="email" formControlName="email">
            <mat-error>
                {{errors.email}}
            </mat-error>
        </mat-form-field>

        <mat-form-field>    
            <input matInput placeholder="Confirm email address" type="email" formControlName="confirmEmail" [errorStateMatcher]="confirmValidParentMatcher">
            <mat-error>
                {{errors.confirmEmail}}
            </mat-error>
        </mat-form-field>
    </div>

    <div formGroupName="passwordGroup">
        <mat-form-field>
            <input matInput placeholder="Password" type="password" formControlName="password">
            <mat-error>
                {{errors.password}}
            </mat-error>
        </mat-form-field>
    
        <mat-form-field>
            <input matInput placeholder="Confirm password" type="password" formControlName="confirmPassword" [errorStateMatcher]="confirmValidParentMatcher">
            <mat-error>
                {{errors.confirmPassword}}
            </mat-error>
        </mat-form-field>
    </div>

    <button mat-raised-button [disabled]="userRegistrationForm.invalid" (click)="register()">Register</button>

</form>

如您所见，我正在使用 <mat-form-field> , <input matInput> , 和 <mat-error>来自 Angular Material 的标签。我的第一个想法是添加 *ngIf指令控制何时 <mat-error>部分显示出来，但这没有效果!可见性实际上由 <mat-form-field> 的有效性(和“触摸”状态)控制。 ，并且没有提供验证器来测试与 HTML 或 Angular 中另一个表单字段的相等性。这就是 errorStateMatcher的地方确认字段上的指令开始发挥作用。 errorStateMatcher指令内置于 Angular Material，并提供使用自定义方法来确定 <mat-form-field> 有效性的能力。表单控件，并允许访问父级的有效性状态来这样做。为了开始理解我们如何在这个用例中使用 errorStateMatcher，让我们先来看看组件类。
组件类
这是一个 Angular Component 类，它使用 FormBuilder 为表单设置验证。

export class App {
    userRegistrationForm: FormGroup;

    confirmValidParentMatcher = new ConfirmValidParentMatcher();

    errors = errorMessages;

    constructor(
        private formBuilder: FormBuilder
    ) {
        this.createForm();
    }

    createForm() {
        this.userRegistrationForm = this.formBuilder.group({
            fullName: ['', [
                Validators.required,
                Validators.minLength(1),
                Validators.maxLength(128)
            ]],
            emailGroup: this.formBuilder.group({
                email: ['', [
                    Validators.required,
                    Validators.email
                ]],
                confirmEmail: ['', Validators.required]
            }, { validator: CustomValidators.childrenEqual}),
            passwordGroup: this.formBuilder.group({
                password: ['', [
                    Validators.required,
                    Validators.pattern(regExps.password)
                ]],
                confirmPassword: ['', Validators.required]
            }, { validator: CustomValidators.childrenEqual})
        });
    }

    register(): void {
        // API call to register your user
    }
}

类(class)设立 FormBuilder用于用户注册表。注意这里有两个 FormGroup类(class)中，一个用于确认电子邮件地址，一个用于确认密码。各个字段使用适当的验证器函数，但都使用组级别的自定义验证器，该验证器检查以确保每个组中的字段彼此相等，如果不相等则返回验证错误。
组的自定义验证器和 errorStateMatcher 指令的组合为我们提供了正确显示确认字段验证错误所需的完整功能。让我们看一下自定义验证模块，将它们整合在一起。
自定义验证模块
我选择将自定义验证功能分解为自己的模块，以便可以轻松重用。出于同样的原因，我还选择将与表单验证相关的其他内容放在该模块中，即正则表达式和错误消息。提前考虑一下，您很可能也会允许用户在用户更新表单中更改他们的电子邮件地址和密码，对吗？这是整个模块的代码。

import { FormGroup, FormControl, FormGroupDirective, NgForm, ValidatorFn } from '@angular/forms';
import { ErrorStateMatcher } from '@angular/material';

/**
 * Custom validator functions for reactive form validation
 */
export class CustomValidators {
    /**
     * Validates that child controls in the form group are equal
     */
    static childrenEqual: ValidatorFn = (formGroup: FormGroup) => {
        const [firstControlName, ...otherControlNames] = Object.keys(formGroup.controls || {});
        const isValid = otherControlNames.every(controlName => formGroup.get(controlName).value === formGroup.get(firstControlName).value);
        return isValid ? null : { childrenNotEqual: true };
    }
}

/**
 * Custom ErrorStateMatcher which returns true (error exists) when the parent form group is invalid and the control has been touched
 */
export class ConfirmValidParentMatcher implements ErrorStateMatcher {
    isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
        return control.parent.invalid && control.touched;
    }
}

/**
 * Collection of reusable RegExps
 */
export const regExps: { [key: string]: RegExp } = {
    password: /^(?=.*[0-9])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{7,15}$/
};

/**
 * Collection of reusable error messages
 */
export const errorMessages: { [key: string]: string } = {
    fullName: 'Full name must be between 1 and 128 characters',
    email: 'Email must be a valid email address (username@domain)',
    confirmEmail: 'Email addresses must match',
    password: 'Password must be between 7 and 15 characters, and contain at least one number and special character',
    confirmPassword: 'Passwords must match'
};

首先我们来看看组的自定义验证器函数， CustomValidators.childrenEqual() .由于我具有面向对象编程背景，因此我选择将此函数设为静态类方法，但您也可以轻松地将其设为独立函数。函数的类型必须是 ValidatorFn (或适当的文字签名)，并采用 AbstractControl 类型的单个参数，或任何衍生类型。我选择制作 FormGroup ，因为这是它的用例。
该函数的代码遍历 FormGroup 中的所有控件。 ，并确保它们的值都等于第一个控件的值。如果他们这样做，它返回 null (表示没有错误)，否则返回 childrenNotEqual错误。
所以现在当字段不相等时我们在组上有一个无效状态，但我们仍然需要使用该状态来控制何时显示我们的错误消息。我们的 ErrorStateMatcher， ConfirmValidParentMatcher ，是什么可以为我们做到这一点。 errorStateMatcher 指令要求您指向一个类的实例，该类实现了 Angular Material 中提供的 ErrorStateMatcher 类。这就是这里使用的签名。 ErrorStateMatcher 需要实现 isErrorState方法，签名显示在代码中。它返回 true或 false ; true表示存在错误，使输入元素的状态无效。
此方法中的单行代码非常简单；它返回 true (错误存在)如果父控件(我们的 FormGroup)无效，但前提是该字段已被触摸。这与 <mat-error> 的默认行为一致，我们将其用于表单上的其余字段。
为了把它们放在一起，我们现在有一个带有自定义验证器的 FormGroup，当我们的字段不相等时返回错误，以及 <mat-error>当组无效时显示。要查看此功能的实际运行情况，请查看这里的工作 plunker与提到的代码的实现。
另外，我在博客上写了这个解决方案 here .