AngularJS略微高级验证/ Bootstrap3风格

时间:2013-11-23 12:13:57

标签: validation angularjs twitter-bootstrap-3

我正在学习AngularJS,仍处于表单验证的最基本阶段。我按照official tutorial here进行操作,并设法让验证工作正常,如果输入无效,背景会改变颜色。

Bootstrap Style Form

这一切都很好,并且算作我学习中的重要一步,但是如何进一步移动并使用验证添加/删除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();
}

非常感谢任何帮助。谢谢。

2 个答案:

答案 0 :(得分: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了解详情。

答案 1 :(得分:0)

您可以使用angular-validator

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