材料设计输入显示错误

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