Angular的事件和表单详解

前端之家收集整理的这篇文章主要介绍了Angular的事件和表单详解前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

前面的文章说道了click事件,与其类似的mouSEOver以及mousemove等等。下面看看selected、change、copy等运用在表单的事件吧。

selected

<input type="checkBox" ng-model="aaa" value="{{aaa}}">

<script type="text/javascript">
var m1 = angular.module('myApp',[]);
m1.controller('Aaa',['$scope',function($scope){}]);

如果我们希望一个select选中指定的option,只需要设置该option为selected="selected",现在为第二个绑定一个变量aaa,对应了一个单选框的ng-model,但单选框选中时aaa为true,取消选中时为false,这样就能设置option的selected了。

change

{{bbb}}

<script type="text/javascript">
var m1 = angular.module('myApp',function($scope){}]);

当输入框的内容发现改变的时候,让bbb变量设为'hello'。

copy

{{ccc}}

<script type="text/javascript">
var m1 = angular.module('myApp',function($scope){}]);

当我们粘贴内容到输入框的时候,ccc的值变成'hello'。

除此之外,还有cut(剪切)、paste(粘贴事件)。

下面看个具体的表单验证的例子:

input相关指令详解

<div ng-controller="Aaa">
<div class="col-md-6">

Feedback">
用户名
Feedback" ng-show="myForm.name.$dirty && myForm.name.$valid"> Feedback" ng-show="myForm.name.$dirty && myForm.name.$invalid">

<div class="form-group has-Feedback">
<div class="col-md-4">
<label for="url">URL

Feedback" ng-show="myForm.url.$dirty && myForm.url.$valid">
用户名:{{user.name}} 没修改:{{myForm.name.$pristine }} 修改过:{{myForm.name.$dirty}} 验证失败:{{myForm.name.$invalid}} 验证成功:{{myForm.name.$valid}} required:{{myForm.name.$error.required}}

URL:{{user.url}} 没修改:{{myForm.url.$pristine }} 修改过:{{myForm.url.$dirty}} 验证失败:{{myForm.url.$invalid}} 验证成功:{{myForm.url.$valid}} 错误详情:{{myForm.url.$error}}

<script type="text/javascript">
var m1 = angular.module('myApp','$interval',function($scope,$interval){
$scope.submitForm = function(isValid,data) {
//验证表单是否可是提交
if (isValid) {
console.log(data);
}else{
console.log('验证失败');
}
};
}]);

首先看看表单部分,使用了novalidate属性禁用了表单默认验证行为,并绑定了ng-submit绑定了submitForm方法

用户名的input上设置了required,表示不能为空。ng-pattern是自定义的正则表达式。ng-model是数据(用户填写的数据)。

URL的input也是类似的设置。

看一下在form绑定的submitForm函数,传递了两个参数,myForm.$valid以及user。

myForm是form的name,代表整个表单,myForm.$valid是个布尔值,表示整个表单的元素是否通过验证,user是用户填写的数据,用于提交数据。我们都可以通过controller得到这些信息,然後提交给後端。

myForm代表整个表单,给input附上name值,就可以得到input的验证信息,我们以用户名的input为例。

用户名:{{user.name}} 没修改:{{myForm.name.$pristine }} 修改过:{{myForm.name.$dirty}} 验证失败:{{myForm.name.$invalid}} 验证成功:{{myForm.name.$valid}} required:{{myForm.name.$error.required}}

这里除了第一个之外,其他都是布尔值。

用户名的input的同级上有两个span元素,分别是正确和错误的图标。(ng-show用于控制元素的显示和隐藏,後面会详细介绍)

myForm.name.$dirty && myForm.name.$valid 当用户修改input的值了,并且验证成功了,我们给予正确的提示

myForm.name.$dirty && myForm.name.$invalid 当用户修改input的值了,但是遗憾验证失败了,我们给予失败的提示

除此之外,angular提供了class为我们做更多样式上的提示

angular在做验证时,这些属性会及时的添加到元素上,方便定制这些类来实现特定的场景应用。

当我们全部输入正确就可以做ajax提交了。

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

事件事件事件表单表单

猜你在找的JavaScript相关文章