- HTML原生的form表单是不能嵌套的,而Angular封装之后的form可以嵌套;
- ng 为form扩展了自动校验,防止重复提交等功能;
- ng 对input元素的type进行了扩展,一共提供了以下10中类型:text, number, url , email, radio, checkbox, hidden, button, submit, reset
- ng 为表单内置了4种CSS样式:ng-valid, ng-invalid, ng-pristine, ng-dirty
- 内息校验器:require, minlength, maxlenghth
- 按钮代码:
<!DOCTYPE html>
<html lang="en" ng-app="TestFormModule">
<head>
<meta charset="UTF-8">
<title>Ng form表单验证</title>
<script src="angular.min.js" ></script>
<script>
var appModule = angular.module('TestFormModule',[]);
appModule.controller("TestFormController",function($scope){
$scope.user = {
userName :'',
password :''
};
$scope.save = function(){
alert("保存数据!"+$scope.user.userName+"-"+$scope.user.password);
}
});
</script>
</head>
<body>
<form name="myForm" ng-submit="save()" ng-controller="TestFormController">
<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>
通过添加 ng-disabled="myForm.$invalid",使提交按钮根据表单的验证状态,检验提交按钮的是否可用状态。