Question

我有一个登录表单，一旦用户单击“提交”，我就会在其中显示任何相关的错误消息。当用户返回到输入字段进行编辑时，我想隐藏错误消息。

<form name="loginForm" ng-submit="loginForm.$valid && login(loginFrm.userId, loginFrm.password);" novalidate>
    <input type="text"
           name="userId"
           ng-model="loginFrm.userId"
           required
           ng-minlength="3"
           placeholder="User ID"
           autofocus>

    <div ng-show="loginForm.$submitted && loginForm.userId.$invalid">Minimum 3 characters required</div>

    <input type="password"
           name="password"
           ng-model="loginFrm.password"
           required
           ng-minlength="4"
           placeholder="Password">

    <div ng-show="loginForm.$submitted && loginForm.password.$invalid">Minimum 4 characters required</div>
    <button>Login</button>
</form>

在我当前的代码中，错误消息仅在该字段变为有效后才隐藏。用户开始编辑字段后，如何隐藏它？

Answer 1

您在此处隐藏消息的两个选项是使用ng-focus或ng-change。取决于您何时要隐藏消息。使用ng-change时，必须更改ng-model-options以允许使用无效值。否则，该事件将不会触发。我将两个选项都添加到了this plnkr。

使用ng-focus

  <input type="text"
         name="userId"
         ng-model="loginFrm.userId"
         required
         ng-minlength="3"
         placeholder="User ID"
         ng-focus="main.userIdEdit = true"
         ng-blur="main.userIdEdit = false"
         autofocus>
  <div ng-show="!main.userIdEdit && loginForm.$submitted && loginForm.userId.$invalid">Minimum 3 characters required</div>

使用ng-change

<input type="password"
       name="password"
       ng-model="loginFrm.password"
       ng-model-options="{ allowInvalid: true }"
       required
       ng-minlength="4"
       placeholder="Password"
       ng-change="main.passwordEdit = true"
       ng-blur="main.passwordEdit = false">
<div ng-show="!main.passwordEdit && loginForm.$submitted && loginForm.password.$invalid">Minimum 4 characters required</div>

用户开始编辑后，隐藏输入字段的错误消息

1 个答案: