42

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

我对必填字段使用 HTML5 required属性，对电子邮件字段使用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>

和我的保存功能。

$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;
    }
};
 })

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

我尝试过以下案例：

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

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

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

这会在用户打开注册表单后立即显示红色边框。

请帮忙。

4

3 回答 3

47

参考文章：显示无效输入字段的红色边框angualrjs

我在所有输入字段上都使用了 ng-class。如下所示

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

当我单击保存按钮时，我将newEmployee.submitted值更改为true（您可以在我的问题中检查它）。所以当我点击保存时，一个名为submit 的类被添加到所有输入字段中（还有一些其他类最初由 angularjs 添加） 。

所以现在我的输入字段包含这样的类

class="ng-pristine ng-invalid submitted"

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

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

谢谢 ！！

更新：

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

form.submitted .ng-invalid
{
    border:1px solid #f00;
}
于 2013-10-02T07:21:24.613 回答
11

如果表单已提交，您可以使用默认的 ng-submitted 设置。

https://docs.angularjs.org/api/ng/directive/form

示例：http: //jsbin.com/cowufugusu/1/

于 2014-11-03T21:30:22.413 回答
6

我创建了一个有效的 CodePen 示例来演示如何实现目标。

我添加ng-click到<form>并从您的按钮中删除了逻辑：

<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');
    }
  };
});

我希望这有帮助。

于 2013-10-01T13:14:37.277 回答