提交表格后angularjs显示所有无效的领域红色边框 [英] Show red border for all invalid fields after submitting form angularjs

问题描述

我有，我有一些输入字段的表格。他们中的一些要求字段和一些是电子邮件字段。

I have a form in which i have some input fields. Some of them are required fields and some are email fields.

我使用HTML5的需要作为必填字段属性和类型=电子邮件作为电子邮件字段属性。

I am using html5 required attribute for required fields and type="email" attribute for email fields.

我的问题是点击提交按钮，我必须表现出的红色边框所有无效后场。

My question is after clicking on submit button i have to show red border for all the invalid fields.

这是我的形式

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

现在，当我点击保存按钮没有填写任何东西越来越显示所有的错误（跨度）。但我想显示所有无效的领域红色边框。

Now, when i click on save button without filling anything all the errors(spans) are getting displayed. But i want to show red border for all the invalid fields.

我曾尝试以下情况：

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

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

but this fails when a user click on submit button directly.(without touching input fields)

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

这是用户打开一个注册表格，尽快显示红色边框。

this shows the red border as soon as user opens a signup form.

请帮忙。

推荐答案

参考文章：<一href=\"http://coding-issues.blogspot.in/2015/09/show-red-border-for-invalid-inputs-fields-on-form-submit-angularjs.html\"相对=nofollow>为无效的输入显示红色边框字段angualrjs

我用纳克级的所有输入fields.like低于

I used ng-class on all input fields.like below

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

当我点击保存按钮，我改变的 newEmployee.submitted 值真正（你可以在我的问题检查一下）。所以，当我点击保存，一个名为类的提交被添加到所有输入字段（有最初由angularjs增加了一些其他类）。

when I click on save button I am changing newEmployee.submitted value to true(you can check it in my question). So when I click on save, a class named submitted gets added to all input fields(there are some other classes initially added by angularjs).

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

So now my input field contains classes like this

class="ng-pristine ng-invalid submitted"

我现在用下面的css code到显示红色的边框上的所有无效输入域（提交表单后）

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

感谢您!!

更新：

我们可以在表单元素添加纳克级，而不是把它应用到所有的输入元素。因此，如果提交表单时，一个新的类（提交）被添加到表单元素。然后，我们可以使用下面的选择器中选择所有无效的输入域

We can add the ng-class at the form element instead of applying it to all input elements. So if the form is submitted, a new class(submitted) gets added to the form element. Then we can select all the invalid input fields using the below selector

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

这篇关于提交表格后angularjs显示所有无效的领域红色边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！