阻止运行angularjs页面的表单验证

时间:2014-01-05 23:32:04

标签: javascript angularjs

我的网络应用程序上有一个简单的表单,要求输入用户名和密码。我使用了标准的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>

有什么想法吗?

1 个答案:

答案 0 :(得分:3)

除非$pristine值消失(或$dirty存在),否则您需要让angular知道不显示消息。这些特殊变量被注入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>