Angular之Form指令
- HTML原生的form表单是不能嵌套的，而AngularJS封装之后的form可以嵌套；
- AngularJS为form扩展了自动效验，防止重复提交等功能；
- AngularJS对input元素的type进行了扩展，一共提供了一下10种类型：text、number、url、email、radio、CheckBox、hidden、button、submit、reset
- AngularJS为表单内置了4种CSS样式：ng-valid、ng-invaild、ng-pristine、ng-dirty
- 内置效验器：require、minlength、maxlength
先看一个简单的，如果你不填写内容，angularjs会把input框变成红色，按钮也变成不可用。
html：
<html ng-app='TestFormModule'>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="framework/angular-1.3.0.14/angular.js"></script>
<script src="FormBasic.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>
</html>
js:
var appModule = angular.module('TestFormModule', []);
appModule.controller("TestFormModule",function($scope){
$scope.user={
userName:'damoqiongqiu',
password:''
};
$scope.save=function(){
alert("保存数据!");
}
});
我们在html表单中，设置了required，在submit按钮，设置了ng-disabled="myForm.$invalid"来设置是否效验通过。
复杂的例子
<!doctype html>
<html ng-app>
<head>
<script src="framework/angular-1.3.0.14/angular.js"></script>
<script src="FormAdv1.js"></script>
</head>
<body>
<div ng-controller="Controller">
<form name="form" class="css-form" novalidate>
Name:
<input type="text" ng-model="user.name" name="uName" required /><br/>
E-mail:
<input type="email" ng-model="user.email" name="uEmail" required /><br/>
<div ng-show="form.uEmail.$dirty && form.uEmail.$invalid">
Invalid:
<span ng-show="form.uEmail.$error.required">Tell us your email.</span>
<span ng-show="form.uEmail.$error.email">This is not a valid email.</span>
</div>
Gender:<br/>
<input type="radio" ng-model="user.gender" value="male" />
male
<input type="radio" ng-model="user.gender" value="female" />
female<br/>
<input type="checkbox" ng-model="user.agree" name="userAgree" required />
I agree:
<input ng-show="user.agree" type="text" ng-model="user.agreeSign" required />
<div ng-show="!user.agree || !user.agreeSign">
Please agree and sign.
</div>
<br/>
<button ng-click="reset()" ng-disabled="isUnchanged(user)">
RESET
</button>
<button ng-click="update(user)" ng-disabled="form.$invalid || isUnchanged(user)">
SAVE
</button>
</form>
</div>
</body>
</html>
js:
function Controller($scope) {
$scope.master = {};
$scope.update = function(user) {
$scope.master = angular.copy(user);
};
$scope.reset = function() {
$scope.user = angular.copy($scope.master);
};
$scope.isUnchanged = function(user) {
return angular.equals(user, $scope.master);
};
$scope.reset();
}
这个例子呢，可以重置表单，可以验证邮箱，可以勾选提示。
自定义表单
我们通过用div来模拟输入项，来防止黑客的攻击行为。
<!doctype html>
<html ng-app="form-example2">
<head>
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<script src="framework/angular-1.3.0.14/angular.js"></script>
<style type="text/css">
div[contentEditable] {
cursor: pointer;
background-color: #D0D0D0;
}
</style>
</head>
<body>
<div>
<div contentEditable="true" ng-model="content" title="Click to edit">Some</div>
<pre>model = {{content}}</pre>
</div>
</body>
</html>
<script>
angular.module('form-example2', []).directive('contenteditable', function() {
return {
require : 'ngModel',
link : function(scope, elm, attrs, ctrl) {
// view -> model
elm.bind('keyup', function() {
scope.$apply(function() {
ctrl.$setViewValue(elm.text());
});
});
// model -> view
ctrl.$render = function() {
elm.html(ctrl.$viewValue);
};
// load init value from DOM
ctrl.$setViewValue(elm.html());
}
};
});
</script>
效果：
