Forms 提交表单angularjs后显示所有无效字段的红色边框

我有一个表单，其中有一些输入字段。其中一些是必填字段，一些是电子邮件字段

我对必填字段使用HTML5required属性，对电子邮件字段使用type=“email”属性

我的问题是，单击提交按钮后，我必须为所有无效字段显示红色边框

这是我的表格：

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

现在，当我单击save按钮而不填充任何内容时，所有错误（范围）都会显示出来。但我想为所有无效字段显示红色边框

我审理了下列案件：

input.ng-dirty.ng-invalid{border:1px solid black;}

但当用户直接点击提交按钮时，这将失败。（不触摸输入字段）

这会在用户打开注册表单时显示红色边框

请提供帮助。

我创建了一个示例来演示如何实现您的目标

我在

中添加了

ng单击
，并从按钮中删除了逻辑：

<form name="addRelation" data-ng-click="save(model)">
...
<input class="btn" type="submit" value="SAVE" />

我希望这能有所帮助。
参考文章：

我在所有输入字段上都使用了ng类

<input type="text" ng-class="{submitted:newEmployee.submitted}" placeholder="First Name" data-ng-model="model.firstName" id="FirstName" name="FirstName" required/>

现在我正在使用下面的css代码在所有无效输入字段上显示红色边框（提交表单后）

谢谢

更新：

我们可以在form元素中添加ng类，而不是将其应用于所有输入元素。因此，如果表单已提交，则会向表单元素添加一个新类（已提交）。然后我们可以使用下面的选择器选择所有无效的输入字段

form.submitted .ng-invalid
{
    border:1px solid #f00;
}

如果表单已提交，则可以使用默认设置ng submitted


示例：
Hi@Adam:谢谢你的回复。我检查了您创建的CodePan示例。单击“保存”按钮时，在无效输入字段下会显示错误。但是我应该为所有无效的输入字段设置红色边框（这是我的实际要求）。酷！但是为什么不在
表单
元素中添加
ng类
？它是单个元素，我们可以将CSS规则选择器声明为
form.submitted.ng invalid
@J.Bruni:是。我们可以申请。这样我们也可以减少代码。谢谢你的好主意……）我将更新我的答案。我只在使用
addRelation时才让它工作。$submitted
而不是simple
submitted
（Angular v1.3.16）无需添加ng类，请使用：.ng submitted.ng无效{…}在单击btn后，由于某些原因，Submited类不会应用于任何输入扫描您的详细信息，如果可能，提供一个解决方案如何工作的示例？form.ng-submitted input.ng-invalid{background:red；}很好的解决方案，在提交表单时将类应用于子输入。form.ng-submitted input.ng-invalid{background:red；}。form.ng-submitted：该类在提交输入时添加到表单中。ng-invalid：子输入类在无效时，因此在提交表单时，会将form.ng-submitted添加到表单中。现在要访问子输入，请使用input.ng-invalid，查找子无效输入。这将使用提交的表单将样式添加到无效输入。
<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');
    }
  };
});

<input type="text" ng-class="{submitted:newEmployee.submitted}" placeholder="First Name" data-ng-model="model.firstName" id="FirstName" name="FirstName" required/>

class="ng-pristine ng-invalid submitted"

input.submitted.ng-invalid
{
  border:1px solid #f00;
}

form.submitted .ng-invalid
{
    border:1px solid #f00;
}