材料設計入力が誤差を表示

Question

私はangular2で材料設計ライトを使用しています。以下のように、必要に応じ

私は、入力フィールドをマーク：

<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> 
       <input class="mdl-textfield__input" 
         type="text" 
         id="user" 
         [(ngModel)]="login.user" 
         ngControl="user" 
         #user="ngForm" 
         (blur)="onBlur()" 
         required 
         /> 
       <label class="mdl-textfield__label" for="user">User</label> 
       <span class="mdl-textfield__error">Field is required.</span> 
      </div> 

しかし、私はちょうどページをロードするとき、それもエラーメッセージを示して、私はフィールドには触れていません。

どうすればよいですか？

Answer 1

!user.validには、ユーザーが必要（有効）である必要があります。 !user.pristineは、endUserが入力フィールドに触れてエラーメッセージが表示されることを示します。

<span [class.mdl-textfield__error]="!user.valid && !user.pristine" 
     *ngIf="!user.valid && !user.pristine">Field is required. 
</span> 

あなたはpristineを使用したくない場合は、単に他の条件を削除します。