エラーメッセージの確認と表示方法 - Angular2 Material Design？

Question

私は、この入力があります。

<form #f="ngForm" name="productForm"> 
    <md-input [(ngModel)]="product.price" name="price" required="true" placeholder="Price (USD)"></md-input> 
    <div ng-messages="productForm.price.$error" role="alert"> 
     <div ng-message-exp="['required']"> 
       Price is required 
      </div> 
    </div> 
</form> 

をしかし、価格が必要とされるメッセージは表示されません。

エラーメッセージを正しくフォーマットする方法を教えてください。

価格入力が空の場合、NG-無効なクラスが表示されます。

私は何かを記入する場合：

角度はでNG-有効なクラスを注入それ。

私はしたいが、このようになりますangular1 md designに似たスタイルを持つことです。

Answer 1

うまくいけば、これはangular2-材料進化として追加されますが、現在はこれを模倣する方法はにありますdividerColorを設定し、MD-HINTディレクティブを使用します。例：

<md-input placeholder="Email address" 
    #email="ngModel" 
    name="email" 
    type="text" 
    fullWidth={true} 
    [(ngModel)]="model.email" 
    required 
    email 
    dividerColor="{{ !email.valid ? 'warn' : 'primary' }}"> 
    <md-hint [hidden]="email.pristine || email.valid"> 
     <span [hidden]="email.errors?.required || !email.errors?.email"> 
      This doesn't appear to be a valid email address. 
     </span> 
     <span [hidden]="!email.errors?.required">Email address is required.</span> 
    </md-hint> 
</md-input> 

Answer 2

角度情報マージン2.0.0以降で検証メッセージを挿入できるようになりました。ドキュメントhereを確認してください。