AngularJS和Bootstrap:提交时无效输入字段上的红色边框

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 () {
    };
}

结果

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

或者,如果我没有对输入字段进行聚焦并且它仍然无效,那么在那个时间显示红色corder将是很好的,而不是等待表单提交.

Answer 1

Twitter Bootstrap有一个has-error类,所以我会将它与ng-class表单组一起使用,然后使用带有label和label-dangerfor classes 的标签:

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

然后在您的控制器中,有一个errors对象,并Name在名称无效时将其属性设置为字符串.

Answer 2

您缺少的第一件事是添加ng-model='name'到输入字段,然后只有在您单击提交时表单才会变为无效,否则表单将始终有效,因为它认为没有字段存在.

然后我会submitted在submit点击按钮上添加课程,然后把边框css像.submitted父母一样,.ng-invalid将是孩子,所以我们可以把风格放在.submitted .ng-invalid

HTML

<div ng-controller="MyCtrl">
    <form class="well" name="formTest" ng-class="{'submitted': submitted}" ng-submit="save()" >
        <div class="form-group">
            <label for="name">Name*</label>
            <input type="name" class="form-control" id="name" placeholder="Enter name" ng-model="name" required />
        </div>{{submitted}}
        <button type="submit" class="btn btn-default" ng-click="submitted= true;">Submit</button>
    </form>
</div>

CSS

.submitted .ng-invalid{
    border: 1px solid red;
}

工作小提琴

希望这可以帮助你,谢谢.