Angular2フォーム検証エラーメッセージ

Question

全体的にAngularとJavaScriptの新機能です。Materializeライブラリ（データエラー属性）を使用してユーザー入力が間違っているときにメッセージを追加しようとしています。だから私の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"が表示されます。

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

私はコンソールに10倍のような機能のログ、私はこれで本当に悪い仕事をしていると思うと、それはだ：私はこのような関数を記述し、[attr.data-エラー]でそれを結合しようとしました貧弱な解決策。どのようにそれがより良い動作するように任意のアイデアは非常に感謝しています！

EDIT 1：追加情報は、エラーによって異なるメッセージを表示したいということです。 Validator.patternからエラーが発生した場合 - メッセージが「Invalid username」のようなものか、Validators.requiredのものか - 「usernameを挿入してください」というようなものが必要です。

Answer 1

（あなたExempleに適応）私はそれをやっている方法は次のとおりです。あなたのTSファイルで

<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> 

：

あなたの CSS（または任意の代替に text-dangerをカスタマイズすることができ

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.. 
} 

）ファイル

Answer 2

私はこのように何かする必要がありましたので、私は<label>要素に置くことができる指令を書くことになりました。

あなたの例では、次のようになります。

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

私はディレクティブはfor属性の値を見て、それからの制御を見つけたので、二度コントロール名を繰り返さないようにしたかったです。 FormControlsと<input>フィールドIDが一致しない場合は、自分で設定することができます。

<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%); 
}