AngularJS多Form验证

        AngularJS中一个页面可以有多个Form，且Form之间还可以嵌套，对于多个Form我们在提交时，通过什么方式来判断校验是否都通过了呢？

一.并列Form的校验控制

        并列Form对当前的Controller来说是可见了，因此可以直接根据Form的$valid进行判断。

app.js

var myApp=angular.module('myModule', ['ui.bootstrap']);
myApp.controller('myCtrl',function($scope){$scope.model = {submitButtonIsDisable : true};$scope.reset=function(){ //表单重置$scope.user={account:'',email:''};};$scope.$watch(function() {if(!$scope.myform.$valid || !$scope.myform2.$valid) {$scope.model.submitButtonIsDisable = true;}else {$scope.model.submitButtonIsDisable = false;}});
});
angular.element(document).ready(function() {   angular.bootstrap(document,['myModule']);  
});

formValidation01.html

 

多同级表单验证
账号： 账号不能为空！输入值必须在3-6之间!
邮箱： 邮箱不能为空！邮箱格式不正确!
提交重置

运行结果：

二.嵌套Form的校验

        嵌套的Form与被嵌套的Form同名，这样的对Form的操作和同一个Form一样。

app.js

var myApp=angular.module('myModule', ['ui.bootstrap']);
myApp.controller('myCtrl',function($scope){$scope.reset=function(){ //表单重置$scope.user={account:'',email:''};};
});
angular.element(document).ready(function() {   angular.bootstrap(document,['myModule']);  
});

formValidation03.html

 

表单验证
账号： 账号不能为空！输入值必须在3-6之间!邮箱： 邮箱不能为空！邮箱格式不正确!
提交重置

运行结果：一切OK



        但实际上不同名称的Form嵌套才算是真正的嵌套，下面我们来看嵌套Form与被嵌套Form名称不同的情况。

app.js同上实例

formValidation01.html

 

嵌套表单验证
账号： 账号不能为空！输入值必须在3-6之间!邮箱： 邮箱不能为空！邮箱格式不正确!
提交重置

运行效果：提交按钮的状态控制正确，但被嵌套Form的验证信息一直没有显示。修改formValidation01.html，在被嵌套的myform2上加一个Controller，效果也一样。

        进一步调试跟踪发现，当前$scope下只有myform，而没有myform2，如下所示：

        当然，如果在被嵌套的form上加一个控制器，并修改被嵌套的form的name与嵌套form的name一样，一切OK。但这样的话，为什么要嵌套一个form还加一个多余的controller呢？这些都是多余的。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！