AngularJS表单基础

来源：互联网发布：淘宝优惠券尺寸是多少编辑：程序博客网时间：2024/06/08 02:54

原文作者：大漠穷秋

原文地址：http://damoqiongqiu.iteye.com/blog/1920191

实例

HTML代码：

<html ng-app='TestFormModule'>    <head>        <meta http-equiv="content-type" content="text/html; charset=utf-8" />        <script src="../angular-1.0.3/angular.min.js"></script>    </head>    <body>        <form name="myForm" ng-submit="save()" ng-controller="TestFormModule">              <input name="userName" type="text" ng-model="user.userName" required/>              <input name="password" type="password" ng-model="user.password" required/>              <input type="submit" ng-disabled="myForm.$invalid"/>        </form>    </body>    <script src="FormBasic.js"></script></html>

JS代码：

var appModule = angular.module('TestFormModule', []);appModule.controller("TestFormModule",function($scope){    $scope.user={        userName:'damoqiongqiu',        password:''    };    $scope.save=function(){        alert("保存数据!");    }});

运行效果：

核心要点解析

第一点

注意：这里的form已经不是原生的HTML表单，而是Angular自己的指令了！

由于我们这个例子里面的<form>标签处于ng-app内部，所以它已经被Angular封装过，是一个Angular指令。

参见官方文档：http://docs.angularjs.org/api/ng.directive:form

经过Angular封装之后的form具有哪些特性呢？

首先，HTML原生的form表单是不能嵌套的，而Angular封装之后的form就可以嵌套。

其次，Angular为form扩展了自动校验、防止重复提交等功能。

有人说，如果我想要使用原生的HTML表单，应该怎么做呢？

Angular提供了一个ng-pristine指令，把这个指令写在form标签中，Angular就知道你想使用原生的form标签了。

第二点

Angular对input元素的type进行了扩展，一共提供了以下10种类型：

textnumberurlemailradiocheckboxhiddenbuttonsubmitreset

根据W3C标准的描述，原生HTML里面的input标签有以下10种类型：

buttoncheckboxfilehiddenimagepasswordradioresetsubmittext

可以看到，Angular扩展了number/url/email/rest这4种input类型，当然原生的类型还是可以用的，因此导入了Angular框架之后，我们一共可以使用14种input类型。

PS：Angular扩展的这4种类型在HTML5规范里面已经全部包含（HTML5规范一共提供了20种input类型），详细文档参见这里：http://www.w3school.com.cn/html5/tag_input.asp

第三点

Angular为表单内置了4中CSS样式。

ng-valid 校验合法状态ng-invalid 校验非法状态ng-pristine 如果要使用原生的form，需要设置这个值ng-dirty     表单处于脏数据状态

第四点

Angular在对表单进行自动校验的时候会校验Model上的属性，如果不设置ng-model，则Angular无法知道myForm.$invalid这个值是否为真。

我们可以把以上例子里面的代码改成这样：

<input name="password" type="password" required/>

也就是把ng-model="user.password"这个属性去掉了，required配置项还保留在这里，然后你会发现，即使你不输入密码，保存按钮也是可以用的。因为此时myForm.$invalid为false，也就是说如果input不绑定数据模型，校验机制就无法校验这个输入项。

0 0