パターンバリデーションに関するメッセージを表示するには？

Question

私は入力が正しくない場合に表示するメッセージを追加する方法

<input class="form-control" type="text" id="elementName" 
            [(ngModel)]="elementName" name="elementName" 
            (input)="onElementNameChanged()" #name="ngModel" required pattern="[A-Za-z0-9_)*\S]*" > 

をテンプレートにpattern属性を追加しましたか？文句を言わない仕事のような

何か：

<div [hidden]="!name.errors.pattern" 
    class="alert alert-danger"> 
    Name must match pattern 
</div> 

Answer 1

私は強く、彼らが検証パターンとメッセージを管理するために、本当に良いですとあなたがReactiveForms代わりのTemplateDrivenFormsを使用することをお勧めします。

アンHTMLの例をスニペット：

<form novalidate [formGroup]="user" (ngSubmit)="onSubmit()"> 

    <div formGroupName="account"> 

     <md-input-container> 
     <input md-input type="text" placeholder="{{'USER.EMAIL' | translate}} *" formControlName="email" autocomplete="off"> 
     <md-hint class="error" *ngIf="user.get('account.email').hasError('required') && user.get('account.email').touched"> 
      {{'VALIDATOR.EMAIL_RQ' | translate}} 
     </md-hint> 
     <md-hint class="error" *ngIf="user.get('account.email').hasError('pattern') && user.get('account.email').touched"> 
      {{'VALIDATOR.WRONG_EMAIL' | translate}} 
     </md-hint> 
     </md-input-container> 

     <md-input-container> 
     <input md-input type="password" placeholder="{{'USER.PASSWORD' | translate}} *" minlength="6" formControlName="password" autocomplete="off"> 
     <md-hint class="error" *ngIf="user.get('account.password').hasError('required') && user.get('account.password').touched"> 
      {{'VALIDATOR.PWD_RQ' | translate}} 
     </md-hint> 
     </md-input-container> 

    </div> 

    <button md-raised-button [disabled]="!user.valid || submitted" color="accent" type="submit" class="submit-button"> 
     {{'LOGIN.BUTTON' | translate}} 
    </button> 

    </form> 

このHTMLの例では、検証とログインフォームを示しています。 md-hint要素は、フォームに特定のフィールドの検証エラーがある場合にのみ表示されます。

実際には、ReactiveFormに一致するインターフェイスを設定できます。

export interface Account { 
    account: { 
    email: string; 
    password: string; 
    } 
} 

活字体の例のスニペット：ここで を例にリンクされているインターフェースである

import { FormGroup, FormBuilder, Validators } from '@angular/forms'; 
    import { EmailRegex } from 'app/shared/shared.interface'; // Imported regex for validator 


    ... 

    user: FormGroup; 

    ngOnInit() { 
    ... 

    // Init your reactive form 
    this.user = this.formBuilder.group({ 
     account: this.formBuilder.group({ 
     email: ['', [Validators.required, Validators.pattern(EmailRegex)]], 
     password: ['', Validators.required] 
     }) 
    }); 
    } 

は注意してくださいどのようにフォームグループ一致インターフェース。また、必要に応じてフォームの値を設定できますが、私のフィールドであるemailとpasswordは空の文字列値に設定されています。 フィールドにリンクされた配列に、必要なだけ多くのバリデータを追加することもできます。あなたは、あなたの主なFormGroupから直接submit()にフォームの値にアクセスすることができます

：この例では十分ではなかった場合は

this.user.value.account.email 

---

は、私は強くあなたがあるReactiveForms上トッドモットーのガイドを読むことをお勧め本当によく説明：

https://toddmotto.com/angular-2-forms-reactive