窗体 – 在提交窗体angularjs后,为所有无效字段显示红色边框

前端之家收集整理的这篇文章主要介绍了窗体 – 在提交窗体angularjs后,为所有无效字段显示红色边框前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一种形式,其中我有一些输入字段。其中一些是必填字段,一些是电子邮件字段。

我对电子邮件字段的必填字段和type =“email”属性使用html5必需属性

我的问题是在点击提交按钮后,我必须显示所有无效字段的红色边框。

这是我的形式

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

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

请帮忙。

参考文献: Show red color border for invalid input fields 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;
}

猜你在找的Angularjs相关文章