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

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

Answer 2

您首先缺少的是将ng-model='name'添加到输入字段，然后只有在您单击提交后表单才会失效，否则表单将始终有效，因为它认为没有字段存在。< / p>

然后我会在submitted点击按钮上添加submit课程，然后将.submitted之类的边框css作为父级，.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;
}

Working Fiddle

希望这可以帮助你，谢谢。

Answer 3

基本上你需要角度来接管验证，所以添加novalidate来形成。同时将ng-class添加到input字段以确定是否添加错误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>

祝你好运..