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

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

这很好，是我学习过程中的重要一步，但是我如何进一步，让验证添加/删除引导所需的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>

我怎样才能让我的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();
}

---

要基于字段验证添加动态类，需要做两件事

为您的表单指定一个

名称

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

---

有关更多详细信息，请参阅表单指南。

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

为您的表单指定一个

名称

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

有关更多详细信息，请参阅表单指南。

您可以使用

免责声明：我是angular validator的作者，您可以使用

---

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

可能重复的可能重复的您能解释一下这

ng class=“{'has-success'：form1.fname.$invalid}

是吗？如果我不得不猜测的话，我会说当

fname

字段无效时，添加一类

已成功

。这对我来说没有意义！顺便说一句，我确实读过你提供的链接，上面没有提到你在做什么：（很抱歉，我颠倒了条件，但想法保持不变。文档给出了类似的示例。搜索表达式用法liek

form.uEmail.$dirty

您能解释一下这

ng class=“{'has-success'：form1.fname.$invalid}

是吗？如果我不得不猜测的话，我会说当

fname

字段无效时，添加一类

已成功

。这对我来说没有意义！顺便说一句，我确实读过你提供的链接，上面没有提到你在做什么：（很抱歉，我颠倒了条件，但想法保持不变。文档给出了类似的示例。搜索表达式用法liek

form.uEmail.$dirty

<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>