AngularJS 稍微高级的验证/Bootstrap3 风格

Question

我正在学习 AngularJS，还处于表单验证的最基本阶段。我关注official tutorial here，并设法让验证像他们一样工作，如果输入无效，背景会改变颜色。

这一切都很好，是我学习的重要一步，但我该如何更进一步，让验证添加/删除 Bootstrap 所需的 CSS 类以显示视觉提示？

这是我的 HTML 代码：

<form novalidate class="css-form">
  <div class="form-group">
    <label class="control-label" for="fname">First Name</label>
    <input type="text" id="fname" placeholder="First Name" class="form-control" ng-model="user.fname" required >
  </div>
  <div class="form-group">
    <label class="control-label" for="lname">Last Name</label>
    <input type="text" id="lname" placeholder="Last Name" class="form-control" ng-model="user.lname" required >
  </div>
  <div class="form-group">
    <label class="control-label" for="email">Email</label>
    <input type="email" id="email" placeholder="Email" class="form-control" ng-model="user.email" required >
  </div>
  <div class="form-group">
    <label class="control-label" for="password">Password</label>
    <input type="password" id="password" placeholder="Password" class="form-control" ng-model="user.password" required >
  </div>
  <div class="form-group">
    <label class="control-label" for="emailpref">Want annoying emails?</label>
    <select class="form-control" ng-model="user.emailpref" required>
      <option value="Null">Please Select</option>
      <option value="Yes">Yes</option>
      <option value="No">No</option>
    </select>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

在Bootstrap3 documentation 中，它说如果我需要显示有效状态，我必须添加一个has-success 的CSS 类，如下所示：

<div class="form-group has-success">
    <label class="control-label" for="fname">First Name</label>
    <input type="text" id="fname" placeholder="First Name" class="form-control" ng-model="user.fname" required >
</div>

我怎样才能让我的 AngularJS 验证来做到这一点？目前，我的AngularJS如下：

function UserCtrl($scope) {
    $scope.master = {};
    $scope.user   = { fname: "J", lname: "Watson", password: "test", email: "j.watson@world.com", emailpref: "Yes" };

    $scope.update = function(user) {
        $scope.master = angular.copy(user);
    };

    $scope.reset = function() {
        $scope.user = angular.copy($scope.master);
    };

    $scope.reset();
}

Answer 1

要根据字段验证添加动态类，您需要做两件事

给你的表单一个name

 `<form novalidate class="css-form" name="form1">`

也给每个输入字段一个name。然后您可以使用表达式来确定字段的错误状态

<div class="form-group has-success" ng-class="{'has-success':form1.fname.$invalid}">
    <label class="control-label" for="fname">First Name</label>
    <input type="text" id="fname" placeholder="First Name" class="form-control" ng-model="user.fname" required name="fname">
</div>

请通过表单指南http://docs.angularjs.org/guide/forms了解更多详情。

Answer 2

您可以使用angular-validator。

免责声明：我是angular-validator的作者