AngularJS使用指令增强标准表单元素功能

JavaScript 2019-01-05

Angular 可使用指令无缝地增强标准表单元素的功能，我们将讨论它的优点，包括：数据绑定、建立模型属性、验证表单、验证表单后反馈信息、表单指令属性下面我们通过案例验证他们的用法：

一、双向数据绑定（ng-model）和建立模型属性

rush:xhtml;"> Angular Directive <Meta charset="utf-8"/>

odos | filter : {complete : 'false'}).length}}

odo.action" class="form-control">

#ActionDone odos"> Box" ng-model="item.complete"/>

首先定义了数据模型scope.todos和添加数据到模型的addNewItem()方法，接着使用双向数据绑定ng−model将视图中表单的action和location和模型中的 scope.todos进行绑定，最后通过ng-click点击属性触发添加数据到模型的addNewItem()方法完成操作

这里写图片描述

二、验证表单

在我们提交表单到服务器之前，我们需要来检测一下用户提交的数据是否存在或者是说合法，否则提交无用的数据会浪费资源。

rush:xhtml;"> Angular Directive <Meta charset="utf-8"/>

Name: required ng-model="newUser.name">

Email: required ng-model="newUser.email">

Box"> I agree to the terms and conditions

Valid: {{myForm.$valid}}

首先定义了数据模型scope.message和添加数据到模型的addUser()方法，接着在视图中添加表单元素validate、name属性和ng−submit属性随后使用双向数据绑定ng−model将视图中表单的action和location和模型中的 scope.todos进行绑定，且使用验证属性 required和email表单之后对提交按钮进行禁用，仅当表单数据全部合法才能用，不合法都禁用（ng-disabled=”myForm.$invalid”）最后通过ng-submit属性提交数据到模型的addUser()方法完成操作

这里写图片描述

三、表单验证反馈信息

我们仅仅对表单进行验证是远远不够的，因为用户不知道为什么出错而感到困惑，因此我们需要反馈信息给用户，让他们明白该填写什么先介绍一下NG中要验证的类

ng-pristine

用户没交互元素被添加到这个类用户交互过元素被添加到这个类添加到这个类添加到这个类

rush:xhtml;"> Angular Directive <Meta charset="utf-8"/> /*交互且必填样式*/ form.validate .ng-invalid-required.ng-dirty { background-color: orange; } /*交互不合法样式*/ form .ng-invalid.ng-dirty { background-color: lightpink; } /*邮件不合法且交互过*/ form.validate .ng-invalid-email.ng-dirty { background-color: lightgoldenrodyellow; } div.error{ color: red; font-weight: bold; } div.summary.ng-valid{ color: green; font-weight: bold; } div.summary.ng-invalid{ color: red; font-weight: bold; }

Email: required="required" ng-model="newUser.email">

Valid : {{myForm.$valid}}

首先在style中定义反馈信息的样式、表单验证的样式接着在JS中写入错误时反馈的信息最后在视图中绑定ng-class

这里写图片描述