Angular2フォーム - ngControl

Question

ngControlを使用して、ユーザーの入力に基づいてエラークラスを適用しようとしています。

どういうわけか、私は動作させることができません。適切なクラスが設定されていることがわかりますが、name.valid（nameはngControlです）を使用しようとすると動作しません。

HTML：

<div ngClass="{alert: name.invalid}"> 
     <label for="name">Name</label> 
     <input ngControl="name" #name id="name" [(ngModel)]="user.name"/> 
    </div> 

</div> 

JS

export class App { 
    userForm: any; 
    user: any; 

    constructor(
    private _formBuilder: FormBuilder) { 

    this.user = {name: 'Ben'}; 
    this.userForm = this._formBuilder.group({ 
     'name': ['', Validators.required] 
    }); 
    } 

} 

私は、彼らが（ちょうど他の例のために、ショーのように/ divsを非表示）このようにそれを使用しないことをangular.ioの例で見ましたか？

は簡単なplunkerです：http://plnkr.co/edit/BKx4yplIOu44tk7Mfolc?p=preview

入力フィールドが空の場合、私が上divがalertクラスを取得することを期待するだろうが、それは起こりません。

Answer 1

は、実際には、あなたのテンプレートに変更するには、3つのものがあります。

• ngClassは[ngClass]でなければなりません。それ以外の場合、値は式ではなく文字列として扱われます。
• #nameは、#name="ngForm"である必要があります。それ以外の場合は、コントロールではなくDOM要素を参照します。
• Angular2のコントロールにはinvalidのプロパティはありませんが、validのコントロールのプロパティはありません。ここで

リファクタリングコードです：ここでは

<div [ngClass]="{alert: !name.valid}"> 
    <label for="name">Name</label> 
    <input ngControl="name" #name="ngForm" 
     required id="name" [(ngModel)]="user.name"/> 
</div> 

plunkrです：http://plnkr.co/edit/OJfb9VDqlrRH4oHXQJyg?p=preview。

FormBuilderをngControlとすることはできません。後者はインラインフォームを定義できるためです。 FormBuilderでは、代わりにngFormControlを使用する必要があります。ここで

はサンプルです：

<div [ngClass]="{alert: !userForm.controls.name.valid}"> 
    <label for="name">Name</label> 
    <input [ngFormControl]="userForm.controls.name" 
     id="name" [(ngModel)]="user.name"/> 
</div> 

は、より多くの詳細については、こちらの記事を参照してください。

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