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

前端之家收集整理的这篇文章主要介绍了AngularJS使用指令增强标准表单元素功能前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

Angular Directive <Meta charset="utf-8"/>

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

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

这里写图片描述

二、验证表单

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

Angular Directive <Meta charset="utf-8"/>

<div id="todoPanel" class="panel" ng-controller="defaultCtrl">

<form name="myForm" novalidate ng-submit="addUser(newUser)">
<div class="well">
<div class="form-group">

required ng-model="newUser.name">
Email: required ng-model="newUser.email">
Box">
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

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

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

<div class="panel" ng-controller="defaultCtrl">

<form name="myForm" class="well" novalidate="novalidate" ng-submit="addUser(newUser)" ng-class="showValidation ? 'validate' : ''">
<div class="form-group">
<div class=" form-group">

required="required" ng-model="newUser.email">
Valid : {{myForm.$valid}}

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

这里写图片描述

四、表单指令属性

1.使用input元素

Angular Directive <Meta charset="utf-8"/>

<div class="panel" id="todoPanel" ng-controller="defaultCtrl">
<form name="myForm" novalidate="novalidate">
<div class="well">
<div class="form-group">

required="requireValue" ng-minlength="3" ng-maxlength="10" ng-pattern="matchPattern">

required Error: {{myForm.sample.$error.required}}

Min Length Error: {{myForm.sample.$error.minlength}}

Max Length Error: {{myForm.sample.$error.maxlength}}

Pattern Error: {{myForm.sample.$error.pattern}}

Element Valid: {{myForm.sample.$valid}}

这里写图片描述

2.选择列表

Angular Directive <Meta charset="utf-8"/>

<div class="panel" id="todoPanel" ng-controller="defaultCtrl">
<form name="myForm" novalidate="novalidate">
<div class="well">
<div class="form-group">

Selected: {{selectValue || "None"}}

这里写图片描述

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/js/47483.html
表单表单

猜你在找的JavaScript相关文章