1

我是 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 的想法。

有谁知道我该怎么做？

太感谢了！

4

1 回答 1

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/

于 2013-10-11T13:36:05.953 回答