AngularJS表单详解及示例代码
程序员文章站
2023-10-30 20:44:04
angularjs提供丰富填写表单和验证。我们可以用ng-click来处理angularjs点击按钮事件，然后使用 $dirty 和 $invalid标志做验证的方式。使用...
angularjs提供丰富填写表单和验证。我们可以用ng-click来处理angularjs点击按钮事件，然后使用 $dirty 和 $invalid标志做验证的方式。使用novalidate表单声明禁止任何浏览器特定的验证。表单控件使用了大量的角活动。让我们快速浏览一下有关事件先。
事件
angularjs提供可与html控件相关联的多个事件。例如ng-click通常与按钮相关联。以下是angularjs支持的事件。
ng-click
ng-dbl-click
ng-mousedown
ng-mouseup
ng-mouseenter
ng-mouseleave
ng-mousemove
ng-mouseover
ng-keydown
ng-keyup
ng-keypress
ng-change
ng-click
使用点击一个按钮的指令，表单重置数据。
<input name="firstname" type="text" ng-model="firstname" required>
<input name="lastname" type="text" ng-model="lastname" required>
<input name="email" type="email" ng-model="email" required>
<button ng-click="reset()">reset</button>
<script>
function studentcontroller($scope) {
$scope.reset = function(){
$scope.firstname = "mahesh";
$scope.lastname = "parashar";
$scope.email = "maheshparashar@yiibai.com";
}
$scope.reset();
}
</script>
验证数据
可使用下面跟踪误差。
$dirty - 规定值已被改变。
$invalid- 该值的状态是无效的。
$error- 指出确切的错误。
例子
下面的例子将展示上述所有指令。
testangularjs.html
<html>
<head>
<title>angular js forms</title>
<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f2f2f2;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
</head>
<body>
<h2>angularjs sample application</h2>
<div ng-app="" ng-controller="studentcontroller">
<form name="studentform" novalidate>
<table border="0">
<tr><td>enter first name:</td><td><input name="firstname" type="text" ng-model="firstname" required>
<span style="color:red" ng-show="studentform.firstname.$dirty && studentform.firstname.$invalid">
<span ng-show="studentform.firstname.$error.required">first name is required.</span>
</span>
</td></tr>
<tr><td>enter last name: </td><td><input name="lastname" type="text" ng-model="lastname" required>
<span style="color:red" ng-show="studentform.lastname.$dirty && studentform.lastname.$invalid">
<span ng-show="studentform.lastname.$error.required">last name is required.</span>
</span>
</td></tr>
<tr><td>email: </td><td><input name="email" type="email" ng-model="email" length="100" required>
<span style="color:red" ng-show="studentform.email.$dirty && studentform.email.$invalid">
<span ng-show="studentform.email.$error.required">email is required.</span>
<span ng-show="studentform.email.$error.email">invalid email address.</span>
</span>
</td></tr>
<tr><td><button ng-click="reset()">reset</button></td><td><button
ng-disabled="studentform.firstname.$dirty && studentform.firstname.$invalid ||
studentform.lastname.$dirty && studentform.lastname.$invalid ||
studentform.email.$dirty && studentform.email.$invalid"
ng-click="submit()">submit</button></td></tr>
</table>
</form>
</div>
<script>
function studentcontroller($scope) {
$scope.reset = function(){
$scope.firstname = "mahesh";
$scope.lastname = "parashar";
$scope.email = "maheshparashar@yiibai.com";
}
$scope.reset();
}
</script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>
输出
在web浏览器打开textangularjs.html。看到结果如下。
以上就是angularjs表单的知识整理，后续继续补充相关知识，谢谢大家对本站的支持！