javascript - 防止为 angularjs 页面运行表单验证

Question

我的网络应用程序上有一个简单的表单，要求输入用户名和密码。我使用了标准的 angularjs 验证。

但是当我加载页面时，验证消息会立即出现。不知道这是为什么。我在下面有我的最终表单标记

 <div ng-controller="LoginCtrl">
    <form name ="loginForm" novalidate>
        <div class="input-group" style="margin-left:100px;">
            <input id="username" type="text" name="username" ng-model="user.name" class="form-control" placeholder="Username" required>
            <span class="alert-danger" ng-show="loginForm.username.$error.required">Username is required.</span>
            <input id="password "type="password" name="password" ng-model="user.password" class="form-control" placeholder="Password" required>
            <span class="alert-danger" ng-show="loginForm.password.$error.required">Password is required.</span>
        </div>
        <input class="btn btn-lg btn-success" type="submit" id="submit" value="Login" ng-click="loginUser()" />
        <pre>Username={{list}}</pre>
    </form>
</div>

有什么想法吗？

Answer 1

您需要让 Angular 知道不要显示消息，除非 $pristine 值消失(或 $dirty 存在)这些特殊变量被注入(inject) AngularJS形式让它知道某些事件已经发生。

例如，以下面的代码为例进行调整:

<span class="alert-danger" ng-show="loginForm.username.$error.required && loginForm.username.$dirty">Username is required.</span>
<span class="alert-danger" ng-show="loginForm.password.$error.required && loginForm.password.$dirty">Password is required.</span>