提交表单angularjs后显示所有无效字段的红色边框
我有一个表单，我有一些input字段。 其中一些是必填字段，一些是电子邮件字段。
我正在使用必填字段的HTML5 必填属性和电子邮件字段的type =“email”属性。
我的问题是点击提交button后，我必须显示所有无效字段的红色边框 。
这是我的forms
<form name="addRelation"> <label>First Name</label> <input type="text" placeholder="First Name" data-ng-model="model.firstName" id="FirstName" name="FirstName" required/><br/> <span class="text-error" data-ng-show="addRelation.submitted && addRelation.FirstName.$error.required">first Name is required</span><br/> <label>Last Name</label> <input type="text" placeholder="Last Name" data-ng-model="model.lastName" id="LastName" name="LastName" required/><br/> <span class="text-error" data-ng-show="addRelation.submitted && addRelation.LastName.$error.required">Last Name is required</span><br/> <label>Email</label> <input type="email" placeholder="Email" data-ng-model="model.email" id="Email" name="Email" required/><br/> <span class="text-error" data-ng-show="addRelation.submitted && addRelation.Email.$error.required">Email address is required</span><br/> <span class="text-error" data-ng-show="addRelation.submitted && addRelation.Email.$error.email">Email address is not valid</span><br/> <input class="btn" data-ng-click="save(model)" type="button" value="SAVE" /> </form> 和我的保存function。
$scope.save= function (model) { if ($scope.addRelation.$valid) { //form is valid- so save it to DB } else { //if form is not valid set $scope.addRelation.submitted to true $scope.addRelation.submitted=true; } }; })
现在，当我点击保存button没有填写任何错误（跨度）正在显示。 但我想显示所有无效字段的红色边框。
我曾尝试过以下情况：
input.ng-dirty.ng-invalid{border:1px solid black;}
但是当用户直接点击提交button时会失败（不用触摸input框）
input.ng-invalid{border:1px solid black;}
这将显示用户打开registry单时的红色边框。
请帮忙。
参考文章： 显示无效input字段angualrjs的红色边框
我在所有input字段上使用了ng-class，如下所示
<input type="text" ng-class="{submitted:newEmployee.submitted}" placeholder="First Name" data-ng-model="model.firstName" id="FirstName" name="FirstName" required/>
当我点击保存button，我正在改变newEmployee.submitted值为true （你可以检查我的问题）。 所以当我点击保存时，一个名为submit的类被添加到所有的input字段（还有一些其他的类最初由angularjs添加）。
所以现在我的input字段包含这样的类
class="ng-pristine ng-invalid submitted"
现在我正在使用下面的CSS代码来显示所有无效input字段 （提交表单后）的红色边框，
input.submitted.ng-invalid { border:1px solid #f00; }
谢谢 ！！
更新：
我们可以在表单元素中添加ng-class而不是将其应用于所有的input元素。 所以如果表单被提交，一个新的类（提交）被添加到表单元素。 然后我们可以使用下面的select器来select所有无效的input字段
form.submitted .ng-invalid { border:1px solid #f00; }
如果表单被提交，你可以使用默认的ng-submitted被设置。
https://docs.angularjs.org/api/ng/directive/form
例如： http : //jsbin.com/cowufugusu/1/
我已经创build了一个可用的CodePen示例来演示如何实现您的目标。
我添加ng-click到<form>并从您的button中删除逻辑：
<form name="addRelation" data-ng-click="save(model)"> ... <input class="btn" type="submit" value="SAVE" />
这是更新的模板：
<section ng-app="app" ng-controller="MainCtrl"> <form class="well" name="addRelation" data-ng-click="save(model)"> <label>First Name</label> <input type="text" placeholder="First Name" data-ng-model="model.firstName" id="FirstName" name="FirstName" required/><br/> <span class="text-error" data-ng-show="addRelation.submitted && addRelation.FirstName.$invalid">First Name is required</span><br/> <label>Last Name</label> <input type="text" placeholder="Last Name" data-ng-model="model.lastName" id="LastName" name="LastName" required/><br/> <span class="text-error" data-ng-show="addRelation.submitted && addRelation.LastName.$invalid">Last Name is required</span><br/> <label>Email</label> <input type="email" placeholder="Email" data-ng-model="model.email" id="Email" name="Email" required/><br/> <span class="text-error" data-ng-show="addRelation.submitted && addRelation.Email.$error.required">Email address is required</span> <span class="text-error" data-ng-show="addRelation.submitted && addRelation.Email.$error.email">Email address is not valid</span><br/> <input class="btn" type="submit" value="SAVE" /> </form> </section>
和控制器代码：
app.controller('MainCtrl', function($scope) { $scope.save = function(model) { $scope.addRelation.submitted = true; if($scope.addRelation.$valid) { // submit to db console.log(model); } else { console.log('Errors in form data'); } }; });
我希望这有帮助。
