提交表单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'); } }; }); 

我希望这有帮助。