Отображение ошибки пользовательского валидатора с помощью mat-error

Алекс является правильным. Вы должны использовать ErrorStateMatcher. Мне пришлось провести много исследований, чтобы понять это, и не было ни одного источника, который дал бы мне полный ответ.  Мне пришлось собрать информацию, которую я узнал из нескольких источников, чтобы сделать свое собственное решение проблемы.  Надеюсь, следующий пример спасет вас от головной боли, которую я испытал.

Форму

вот пример формы который использует элементы углового материала для страницы регистрации пользователя.

<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> бирки от углового материала. Моей первой мыслью было добавить *ngIf директива для управления, когда <mat-error> разделы появляются, но это не имеет никакого эффекта! Видимость фактически контролируется действительностью (и" тронутым " статусом)<mat-form-field>, и нет предоставленного валидатора для проверки равенства другому полю формы в HTML или Angular. Вот где errorStateMatcher директивы на полях подтверждения вступают в игру.

на errorStateMatcher директива встроена в угловой материал и предоставляет возможность использовать пользовательский метод для определения действительности <mat-form-field> управление формой и позволяет получить доступ к статусу действительности родителя для этого. Чтобы начать понимать, как мы можем использовать errorStateMatcher для этого случая использования, давайте сначала рассмотрим класс component.

Компонент Класс!--36-->

вот угловой класс компонента, который устанавливает проверку формы с помощью 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
    }
}

класс устанавливает FormBuilder для формы регистрации пользователей. Обратите внимание, что есть два FormGroups в классе, один для подтверждения адреса электронной почты и один для подтверждения пароля. Отдельные поля используют соответствующие функции валидатора, но оба используют пользовательский валидатор на уровне группы, который проверяет, чтобы убедиться, что поля в каждом группы равны друг другу, и возвращает ошибку проверки, если они не являются.

комбинация пользовательского валидатора для групп и директивы 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 (или буквенная подпись approprate) и возьмите один параметр типа AbstractControl, или любой производный тип. Я решил сделать это FormGroup, так как это вариант использования, для которого он предназначен.

код функции повторяет все элементы управления в FormGroup, и гарантирует, что их значения равны значениям первого элемента управления. Если они это сделают, он вернется null (без ошибок), иначе возвращает childrenNotEqual ошибка.

таким образом, теперь у нас есть недопустимый статус в группе, когда поля не равны, но нам все равно нужно использовать этот статус для управления, когда показывать наше сообщение об ошибке. Наш ErrorStateMatcher,ConfirmValidParentMatcher, что может сделать это для нас. Директива errorStateMatcher требует указания на экземпляр класса который реализует предоставленный класс ErrorStateMatcher в угловом материале. Так вот какая здесь используется подпись. ErrorStateMatcher требует реализации isErrorState метод, с подписью, показанной в коде. Он возвращается true или false; true указывает на наличие ошибки, что делает недопустимым состояние входного элемента.

одиночная строка кода в этом методе довольно проста; она возвращает true (ошибка существует), если родительский элемент управления (наша FormGroup) недопустимо, но только если поле было затронуто. Это согласуется с поведением по умолчанию <mat-error>, который мы используем для остальных полей формы.

чтобы объединить все это вместе, теперь у нас есть FormGroup с пользовательским валидатором, который возвращает ошибку, когда наши поля не равны, и <mat-error>, который отображается, когда группа является недействительным. Чтобы увидеть эту функциональность в действии, вот рабочий plunker С реализацией кода упомянутый.

кроме того, я написал в блоге это решение здесь.