我使用AngularJS和Bootstrap实现了这个基本形式：
http://jsfiddle.net/dennismadsen/0stwd03k/
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将是很好的,而不是等待表单提交.
首先,你错过了将ng-model =’name’添加到输入字段,然后唯一的表单在点击提交时将变为无效,否则表格将始终有效,因为它认为其中没有字段.
然后我将提交的类添加到提交单击按钮,然后将边框css添加为.submitted将为parent而.ng-invalid将为child,因此我们可以将样式设置为.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;
}
希望这可以帮助你,谢谢.
