材料设计输入显示错误

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