Angular2 Forms Validation Сообщения об ошибках

Question

Я новичок в Angular и JavaScript в целом, я пытаюсь добавить сообщения, когда пользовательский ввод неверен, используя библиотеку Materialize (атрибут data-error). Поэтому мой компонент html выглядит так:

  <input 
        type="text" 
        id="username" 
        formControlName="username" 
        [class.valid]="username?.valid && username.dirty" 
        [class.invalid]="!username?.valid && username.dirty && !username.pending" 
      > 
      <label for="username" 
        data-error="ERROR_MESSAGE" // <-- this is what I need to work 
      >Username</label> 

Я хочу изменить атрибут ошибки передачи данных в зависимости от присутствующей ошибки. Сейчас он будет печатать «ERROR_MESSAGE» при любой имеющейся ошибке. Я пытался писать функции и связывание его с [attr.data-ошибкой], как это:

displayUsernameErrorMessage() { 
    let message = ''; 
    let usernameError = this.username.errors; 
    if(usernameError.pattern){ 
     message = "Invalid Username" 
     console.log(usernameError); 
    } 
    else { 
     return null; 
    } 
} 

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

EDIT 1: Дополнительная информация о том, что я хочу отображать разные сообщения в зависимости от ошибки. Поэтому, если я получаю сообщение об ошибке от Validator.pattern - я хочу, чтобы сообщение было чем-то вроде «Недопустимое имя пользователя» или если оно из Validators.required - «Пожалуйста, вставьте имя пользователя», что-то вроде этого.

Answer 1

Вот как я это делаю (адаптированный к вашему Exemple):

<form name="nameForm" [formGroup]="nameForm"> 
<fieldset> 
     <label for="username">Username</label> 
     <input 
      required 
      id="username" 
      formControlName="username" 
     > 
     <span 
      class="text-danger" 
      [hidden]="nameForm.controls.name.valid || itemForm.controls.name.pristine" 
     > 
      <small>{{'Please enter your name'}}</small> 
     </span> 
     </fieldset> 
</form> 

В файле TS:

import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms'; 

export class InputComponent { 
    public nameForm: FormGroup; 
    constructor(private formBuilder: FormBuilder) { 

    this.nameForm = this.formBuilder.group({ 
    username: new FormControl('', Validators.required), 
    }); 
    } 
//... codes.. 
} 

Где можно настроить text-danger в вашем CSS (или любой другой альтернативы) file

Answer 2

Мне нужно было сделать что-то подобное, поэтому я закончил писать директиву, которая может быть размещена на элементах <label>.

В вашем примере это будет выглядеть следующим образом:

<label for="username" errorMessageForFormControl>Username</label> 
<input required id="username" formControlName="username"> 

Я хотел избежать повторения имени управления дважды, директива смотрит на значение атрибута for и находит контроль от этого. Если ваши идентификаторы полей FormControls и <input> не совпадают, вы можете установить их самостоятельно.

<label for="somethingDifferent" errorMessageForFormControl="username">Username</label> 
<input required id="somethingDifferent" formControlName="username"> 

директива закончилась выглядеть так:

import { Directive, Host, HostBinding, Input, Optional, OnInit, SkipSelf } from '@angular/core'; 
import { AbstractControl, ControlContainer } from '@angular/forms'; 

@Directive({ 
    selector: '[errorMessageForFormControl]' 
}) 
export class errorMessageDirective implements OnInit { 
    @HostBinding('class.validation-error') validationErrorCssClass = false; 
    @HostBinding('attr.data-error') errorMessage: string = null; 

    @Input() public errorMessageForFormControl: string; 
    @Input() public for: string; 

    private ctrl: AbstractControl = null; 

    constructor(
     @Optional() @Host() @SkipSelf() 
     private controlContainer: ControlContainer 
    ) { } 

    public ngOnInit(): void { 
     if (!this.controlContainer) { 
      return; 
     } 

     const formControlName = this.errorMessageForFormControl || this.for; 
     if (formControlName) { 
      this.ctrl = this.controlContainer.control.get(formControlName); 
     } 

     if (this.ctrl) { 
      this.ctrl.statusChanges.subscribe(statusText => { 

       if (statusText === 'INVALID') { 
        // invalid 
        const errors = this.ctrl.errors; 
        if (errors) { 
         const errKey = Object.keys(errors)[0]; 
         const errVal = errors[errKey]; 
         this.errorMessage = errVal === true ? errKey : errVal; 
        } else { 
         this.errorMessage = 'validation failed'; 
        } 

        this.validationErrorCssClass = true; 
       } else { 
        // valid 
        this.errorMessage = null; 
        this.validationErrorCssClass = false; 
       } 
      }); 
     } 
    } 
} 

И вы можете обратиться к атрибуту данных ошибок в некоторых CSS

[data-error].validation-error::after { 
    color:red; 
    content: attr(data-error); 
    opacity: 0.8; 
    font-weight: bold; 
    font-style: italic; 
    font-size: 0.75em; 
    margin-right: 0.25em; 
    z-index: 99; 

    float: right; 
    transform: translateY(85%); 
}