版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/luo4105/article/details/77897260
表单重置
表单重置实例
代码语言：javascript复制<div ng-app="myApp"ng-controller="formCtrl">
<form novalidate>
First Name:<br>
<input ng-model="user.firstName" /><br>
Last Name:<br>
<input ng-model="user.lastName" />
<br><br>
<button ng-click="rest()">重置</button>
</form>
<p>form = {{user }}</p>
<p>master = {{master}}</p>
</div><script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope){
$scope.master = {firstName:"John", lastName:"Doe"};
$scope.rest = function (){
$scope.user= angular.copy($scope.master);
}
$scope.rest();
});
</script>表单验证
AngularJS表单的内置验证
表单的状态有
下面是表单验证提示和是否能提交的例子
代码语言：javascript复制<form ng-app="myApp"ng-controller="validateCtrl"
name="myForm" novalidate>
<p>用户名:<br>
<input type="text"name="user" ng-model="user" requiredng-minlength="3" ng-maxlength="8">
<spanng-hide="myForm.user.$valid" style="color:red">
<spanng-show="myForm.user.$error.required">用户名是必须的。</span>
<spanng-show="myForm.user.$error.minlength">合法输入必须不小于3字符</span>
<spanng-show="myForm.user.$error.maxlength">合法输入必须不大于8字符</span>
</span>
</p>
<p>邮箱:<br>
<input type="email"name="email" ng-model="email" required>
<span ng-hide="myForm.email.$valid"style="color:red">
<spanng-show="myForm.email.$error.repuired">邮箱地址是必须的</span>
<spanng-show="myForm.email.$error.email">非法的邮箱地址。</span>
</span>
</p>
<p>
<input type="submit"ng-disabled="myForm.$invalid" />
</p>
</form><script>
var app = angular.module('myApp', []);
app.controller('validateCtrl',function($scope) {
$scope.user = 'John Doe';
$scope.email = 'john.doe@gmail.com';
});
</script>实例解析
1. 表单验证表达式必须从表单开始，即myForm.user.$valid而不能是user.$valid。
2. 表单验证不通过可以通过myForm.email.$error.xxx得到是什么原因不通过
3. ng-disabled="myForm.$invalid"作用是表单验证不通过时，提交按钮不可用
