材料設計輸入顯示錯誤

Question

我在angular2中使用材料設計lite。

我標誌着一個輸入字段需要，如：

<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，只需刪除其他條件。