Angular2：入力ごとにエラーメッセージを定義せずにフォームを検証しますか？

Question

validate formをangular2に入力します。私はいくつかのドキュメントを学び、そしてそれはこのように定義されます：

<form [ngFormModel]="form"> 
     <input type="text" ngControl="username" /> 

     <p *ngIf="username.pending">Fetching data from the server...</p> 

     <div *ngIf="username.dirty && !username.valid && !username.pending"> 
      <p *ngIf="username.errors.required">Username is required.</p> 
      <p *ngIf="username.errors.startsWithNumber">Your username can't start with a number</p> 
      <p *ngIf="username.errors.usernameTaken">This username is taken</p> 
     </div> 

     <button (click)="submitData()" [disabled]="!form.valid" class="btn btn-primary">Sumbit data</button> 
</form> 

constructor(private builder: FormBuilder) { 

    this.username = new Control(
     "", 
     Validators.compose([Validators.required, UsernameValidator.startsWithNumber]), 
     UsernameValidator.usernameTaken 
    ); 

    this.form = builder.group({ 
     username: this.username 
    }); 
} 

私は多くのエラーメッセージを定義する必要があり、各入力で。私はそれが良くないと思う。コンポーネントを書くことができ、あなたのコード一つのアプローチを減らすために、この

<input required name="username" maxlength='8' pattern="^(?!\s|.*\s$).*$" ...> 

Answer 1

のように、私はjquery.validateようにしたい
は、私はちょうどinput定義するとエラーメッセージが自動レンダリングされます。 control-messagesコンポーネント内に行くとコンポーネントとHTMLはこの

<input ngControl="email" id="email" /> 
<control-messages control="email"></control-messages> 

、すべてのdirty workようになり、すべてのcondition checkingsとerror messages

This guy did a nice job here of implementing and explaining it.

---

を処理する

。

Answer 2

実際、そうするために専用コンポーネントを活用することができます。このコンポーネントは、「ラベル」やエラー領域などのすべての一般的なコンテンツになります。重要な点は、ng-contentを利用してフォーム要素（input、textarea、select）をこのコンポーネントの入力として提供する方法です。

もう1つ興味深いのは、この入力に関連付けられているコントロールをコンポーネントから参照できることです。このようにして、フォーム要素に関連付けられた検証エラーを透過的に知る/表示することができます。

このようなコンポーネントの実装例です。関連するテンプレートの最初の内容：

<div class="form-group form-group-sm" [ngClass]="{'has-error':state && !state.valid}"> 
    <label for="for" 
    class="col-sm-3 control-label”>{{label}}</label> 
    <div class="col-sm-8"> 
    <ng-content ></ng-content> 
    <p *ngIf="state.pending">Fetching data from the server...</p> 

    <div *ngIf="state.dirty && !state.valid && !state.pending"> 
     <p *ngIf="state.errors.required">Field is required.</p> 
     <p *ngIf="state.errors.startsWithNumber">Your field can't start with a number</p> 
     <p *ngIf="state.errors.usernameTaken">This field is taken</p> 
    </div> 
    </div> 
</div> 

およびコンポーネント自体

@Component({ 
    selector: 'field', 
    templateUrl: 'field.html' 
}) 
export class FormFieldComponent { 
    @Input() 
    label: string; 

    @Input() 
    feedback: boolean; 

    @ContentChild(NgFormControl) state; 

    (...) 
} 

次に、あなたがこのようフォームでこのコンポーネントを使用することができます。

<form [ngFormModel]="form"> 
    <field label="Name"> 
    <input type="text" [ngFormControl]="form.controls.username" /> 
    </field> 

    <button (click)="submitData()" [disabled]="!form.valid" class="btn btn-primary">Sumbit data</button> 
</form> 

は、この記事（項を参照してください。 「フィールドのフォームコンポーネント」を参照）。

• http://restlet.com/blog/2016/02/17/implementing-angular2-forms-beyond-basics-part-2/