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

结果

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

或者，如果我取消了输入字段的焦点，但它仍然无效，那么在那个时候显示红色记号笔将是非常好的，而不是等待表单提交。

Answer 1

基本上，你需要角来接管验证，所以添加novalester到表单中。还添加ng-class到输入字段，以确定阉羊添加错误css

<form name="myForm" novalidate ng-submit="test()">
    <input type="text" name="user" ng-model="user" required ng-class="myForm.user.$invalid && myForm.user.$dirty ? 'error' : ''">
    <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
        <span ng-show="myForm.user.$error.required">Username is required.    </span>
</span>

<p>
    <input type="submit"
    ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
    myForm.email.$dirty && myForm.email.$invalid">
</p>
</form>

祝你好运...

Answer 2

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

然后我会在submit点击按钮上添加submitted类，然后像一样放置边框css。提交的将是父级和。ng invalid将是子项，因此我们可以将样式设置为。提交。ng无效

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

工作小提琴

希望这能帮助你，谢谢。

Answer 3

Twitter引导有一个has error类，因此我会将它与表单组的ng类结合使用，然后是一个带有标签和标签危险类的标签，以便更好地衡量：

<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属性设置为字符串。