Question

我是AngularJS的新手。我正在尝试实施一些验证。作为测试，我正在查看基本登录屏幕。该登录屏幕的代码如下所示：

<style type="text/css">
  input.ng-invalid.ng-dirty { background-color: red; color:white; }
</style>

<form novalidate name="loginForm" role="form">
  <div ng-show="(isDataValid==false)" class="ng-hide">
    Please correct the errors on the page.
  </div>

  <div>
    <label for="username">Username</label>
    <input type="text" id="username" placeholder="Username" ng-model="username"
           required>
  </div>

  <div>
    <label for="password">Password</label>
    <input type="password" id="password" placeholder="Password" ng-model="password"
           required>
  </div>

  <button type="submit" ng-click="formSubmit(loginForm);">Submit</button>
</form>

<script type="text/javascript">
  function loginController($scope) {
    $scope.isDataValid = null;

    $scope.formSubmit = function(f) {
      $scope.isDataValid = f.$valid;
      if (f.$invalid) {
        return;
      }

      return false;
    };
  }
</script>

当页面加载时，我希望它处于干净的状态（这是有效的）。我希望在用户开始使用字段后进行字段级验证（这可行）。我想在用户点击“提交”时进行字段级验证。这部分有效。

我的问题是，如果我在不使用字段的情况下按“提交”，字段上的css类就不会更新。我相信原因是因为这些字段不是“脏”的。但是，我不确定如何解决这个问题，1）满足我的第一个要求，2）坚持让AngularJS控件远离DOM的想法。

有谁知道我该怎么做？

非常感谢你！

Answer 1

我评论了你的帖子，但我想我应该展示一个例子。

 <button type="button" class="btn btn-primary btn-lg" ng-click="submit()" ng-disabled="(createContacts.$dirty && createContacts.$invalid) || createContacts.$pristine"><span class="icon-save"></span> Save Contacts</button>

这是我在名为“createContacts”的表单中使用的“提交”按钮。当表单处于“原始”状态时（当没有输入任何内容时）以及表单“脏”和“无效”（已输入信息但表单有验证错误）时，用户无法使用此按钮。

http://jsfiddle.net/Ddb4M/

在AngularJS中验证

1 个答案: