AngularJS 和 Bootstrap : Red border on invalid input field on submit

Question

我已经使用 AngularJS 和 Bootstrap 实现了这个基本表单:
http://jsfiddle.net/dennismadsen/0stwd03k/

HTML

<div ng-controller="MyCtrl">
    <form class="well" name="formTest" ng-submit="save()">
        <div class="form-group">
            <label for="name">Name*</label>
            <input type="name" class="form-control" id="name" placeholder="Enter name" required />
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
    </form>
</div>

JavaScript

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {

    $scope.save = function () {
    };
}

结果



名称输入字段是必需的。当我单击提交按钮时，如果输入字段无效，我需要输入字段具有红色边框。如何才能做到这一点？

或者，如果我取消关注输入字段并且它仍然无效，那么在那个时候显示红色标线会很棒，而不是等待表单提交。

Answer 1

Twitter Bootstrap 有一个 has-error类，所以我会将它与 ng-class 结合使用对于表单组，然后是带有 label 的标签和 label-danger良好措施的类:

<div class="form-group" ng-class="{'has-error': errors.Name }">
    <label for="name">Name*</label>
    <input type="name" class="form-control" id="name" placeholder="Enter name" required />
    <span class="label label-danger" ng-if="errors.Name">{{errors.Name}}</span>
</div>

然后在你的 Controller 中，有一个 errors对象，并设置 Name当名称无效时，此属性为字符串。