材料设计输入显示错误

Question

我在 angular2 中使用 Material Design 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 表示最终用户应该触摸输入字段，然后将显示错误消息。

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

如果您不想使用 pristine，只需删除其他条件即可。