Лучший способ показать сообщения об ошибках для угловых реактивных форм, одна форма управления несколькими ошибками проверки?

Question

Я показываю сообщения об ошибках реактивной формы согласно предложенному подходу углового пример ошибки проверки угловой формы .

html-код ошибки отображения на странице:

<div [formGroup]="myForm">
  <div>
<input type="text" formControlName="firstName"/>
<div *ngIf="myForm.controls.firstName.invalid"
    class="alert alert-danger">
    <div *ngIf="myForm.controls.firstName.errors.required">
      This Field is Required.
    </div>
    <div *ngIf="myForm.controls.firstName.errors.maxlength">
      your can enter only 50 characters
    </div>
</div>
  </div>
  <div>
<input type="text" formControlName="lastName"/>
<div *ngIf="myForm.controls.lastName.invalid"
    class="alert alert-danger">
    <div *ngIf="myForm.controls.lastName.errors.required">
      This Field is Required.
    </div>
    <div *ngIf="myForm.controls.lastName.errors.maxlength">
      your can enter only 50 characters
    </div>
</div>
  </div>
  </div>

Только для справки моего кода компонента ниже:

this.myForm = this.formBuilder.group({
      firstName:['',[Validators.required,Validators.maxLength(50)]],
      lastName:['',[Validators.required,Validators.maxLength(50)]]
    })

ЕслиВы видите приведенный выше код, я применил две проверки к моим полям firstName и lastName.

Для отображения сообщения об ошибке я написал несколько условий * ngIf, чтобы показать сообщение об ошибке.

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

Answer 1

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

Answer 2

Я работал над корпоративным приложением, которое управляется первичной формой и столкнулось с той же проблемой.Лучшее решение, которое я мог определить, - это обернуть все элементы управления вводом в компоненты.Затем обработка отображения проверки в компоненте.Это позволяет отображать согласованную проверку без многократного повторения кода в каждой форме.

field-input-text.component.html

    <input [formControl]="formControlItem" [maxlength]="maxlength" [placeholder]="placeholder" #input>
    <span *ngIf="formControlItem.invalid && (formControlItem.dirty || formControlItem.touched)" class="text-danger">
        <span *ngIf="formControlItem.errors.required">This field is required</span>
        <span *ngIf="formControlItem.errors.minlength">This field is too short</span>
        <span *ngIf="formControlItem.errors.maxlength">This field is too long</span>
        <span *ngIf="formControlItem.errors.pattern">Invalid value for this field</span>
    </span>

field-input-text-component.ts

    import { Component, OnInit } from '@angular/core';
    import { FormControl } from '@angular/forms';

    @Component({
      selector: 'app-field-input-text',
      templateUrl: './field-input-text.component.html'
    })
    export class FieldInputTextComponent implements OnInit, AfterViewInit {
      @Input() formControlItem: FormControl;
      @Input() maxlength: number;
      @Input() placeholder: string = '';

      constructor() { }

      ngOnInit() {
      }
    }

Использование

    <app-field-input-text [formControlItem]="form.controls.username" maxlength="10"></app-field-input-text>

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

Основным недостатком является невозможность использования атрибутов formControl или formControlName.Я попытался создать пользовательский компонент ControlValueAccessor, но это не помогло с отображением проверки.

Я нашел ваш вопрос в поиске, чтобы узнать, нашел ли кто-нибудь другой лучший способ.Я знаю, что этот ответ немного запоздал, но, надеюсь, он поможет.

Answer 3

Я бы предложил иметь компонент с именем print-error, который может обрабатывать любые ошибки OOTB или Custom.

Вы можете обработать столько ошибок, сколько хотите.

print-error.component.ts

import {Component, Input} from '@angular/core';

@Component({
    selector: 'print-error',
    templateUrl: './print-error.component.html',
    providers: []
})
export class PrintError {

    @Input("control")
    control: any;

}

print-error.component.html

<div class="text-danger" *ngIf="control && control.errors && (control.dirty || control.touched)">
     <div *ngIf="control.errors.required"><small>This field is required</small></div>
     <div *ngIf="control.errors.unique"><small>{{control.errors.unique}}</small></div>
     <div *ngIf="control.errors.lessThen"><small>{{control.errors.lessThen}}</small></div>
     <div *ngIf="control.errors.greaterThan"><small>{{control.errors.greaterThan}}</small></div>
     <div *ngIf="control.errors.email"><small>{{control.errors.email}}</small></div>
     <div *ngIf="control.errors.mobile"><small>{{control.errors.mobile}}</small></div>
     <div *ngIf="control.errors.confirmPassword"><small>{{control.errors.confirmPassword}}</small></div>
</div>

Использование

 <label for="folder-name">Email</label>
 <input name="email" required   emailValidator #email="ngModel" [(ngModel)]="user.email">
 <print-error [control]="email"></print-error>

Answer 4

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

Посмотрите на источник, чтобы узнать, как настроены встроенные валидаторы.https://github.com/angular/angular/blob/2.0.0-rc.3/modules/%40angular/common/src/forms-deprecated/directives/validators.ts#L104-L124

Вот пример, который я выкопал, но я думаю, что в большинстве случаев это немного излишне.Просто напишите строку * ngIf в шаблоне HTML вместо совершенно нового @Attribute ...

https://scotch.io/tutorials/how-to-implement-a-custom-validator-directive-confirm-password-in-angular-2