mat-error, помещенный в отдельный компонент, не рендерится правильно - PullRequest
Новая
       6

mat-error, помещенный в отдельный компонент, не рендерится правильно

0 голосов
/ 22 мая 2018

Я хочу использовать mat-errors для рендеринга ошибок на стороне сервера в моем Angular 5 SPA.

Это то, что я получил, и это работает 

<mat-form-field class="col-6">
    <input matInput formControlName="firstName">
    <mat-error [hidden]="!form.controls.firstName.hasError('required')">This field is required and cannot be empty</mat-error>
    <mat-error [hidden]="!form.controls.firstName.hasError('other')">Some other error</mat-error>
</mat-form-field>

Каждое поле формы выглядит одинаково.Поле ввода и множество тегов ошибок матов ниже.Существует много повторяющихся кодов, прикрепленных к одному полю ввода.Кроме того, добавление нового сообщения об ошибке приведет к добавлению его в каждое нужное поле.Я думаю, что это хорошее место для введения компонента, который управляет сообщениями об ошибках, и внедряется с контролем формы, он решает, какую ошибку показывать (я хочу иметь общие сообщения об ошибках для всех полей).

Так что я бы хотелэто так 

<mat-form-field class="col-6">
    <input matInput formControlName="firstName">
    <app-mat-errors [field]="form.controls.firstName"></app-map-errors>
</mat-form-field>

и в шаблоне компонента app-mat-errors есть весь код mat-error, который мы имели в каждом отдельном поле 

<mat-error [hidden]="!field.hasError('required')">This field is required and cannot be empty</mat-error>
<mat-error [hidden]="!field.hasError('other')">Some other error</mat-error>
etc....

При таком подходе яУ меня проблема с отображением компонента правильно.

При добавлении в теги <app-mat-errors>, <mat-error> внедряются в тег app-mat-errors и не отображаются должным образом (они не стилизуются и видны постоянно, даже когда ошибки отсутствуют)

Есть ли способ, с помощью которого angular может визуализировать компонент без родительского тега?Или у вас есть идеи, как заставить его работать должным образом?Заранее спасибо.

1 Ответ

0 голосов
/ 22 мая 2018

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

Однако вам не нужно иметь отношение один к одному между вашими ошибкамии <mat-error> elements - <mat-error> - это не специальный объект - это просто контейнер, в котором <mat-form-field> отображает содержимое ошибки.Таким образом, вы можете поместить свою логику ошибок в компонент и использовать компонент внутри одного <mat-error>.Вот как это может выглядеть:

Поле формы HTML: 

<mat-form-field class="col-6">
    <input matInput formControlName="firstName">
    <mat-error>
        <app-mat-errors [field]="form.controls.firstName"></app-map-errors>
    </mat-error>
</mat-form-field>

Шаблон компонента ошибок: 

<ng-container *ngIf="field.hasError('required')">This field is required and cannot be empty</ng-container>
<ng-container *ngIf="field.hasError('other')">Some other error</ng-container>
etc....

Если в вашем поле может быть несколько ошибок, убедитесь, чточтобы учесть это в логике * ngIf, чтобы избежать появления более одного сообщения.

Возможно, вы захотите рассмотреть реализацию логики как функции, а не как компонента, где это может быть прощенаписать логику: 

<mat-form-field class="col-6">
    <input matInput formControlName="firstName">
    <mat-error>
        {{getErrorMessage(form.controls.firstName)}}
    </mat-error>
</mat-form-field>

getErrorMessage(control: FormControl): string {
    if (control) {
        if (control.hasError('required')) return 'This field is required and cannot be empty';
        if (control.hasError('other')) return 'Some other error';
        // etc.
    }
    return '';
}
...