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
<html>
<head>
<title>多同级表单验证</title>
<link rel="stylesheet" href="lib/bootstrap-3.0.0/css/bootstrap.css">
<style>
#css_form input.ng-invalid.ng-dirty {
background-color: #FFC0CB;
}
#css_form input.ng-valid.ng-dirty {
background-color: #78FA89;
}
</style>
</head>
<body ng-controller="myCtrl">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="panel-title">多同级表单验证</div>
</div>
<div class="panel-body">
<div class="row">
<form id="css_form" class="form-horizontal" novalidate name="myform" role="form">
<div class="form-group">
<label for="inputAccount" class="col-md-2 control-label">账号：</label>
<div class="col-md-2">
<!--输入框 -->
<input type="number" ng-model="user.account" min="3" max="6" name="myAccount" required class="form-control" id="inputAccount" placeholder="请输入3-6的整数"/>
</div>
<!-- 隐藏块，显示验证信息-->
<div class="alert alert-danger well-sm" ng-show="myform.myAccount.$error.required">账号不能为空！</div>
<div class="alert alert-danger well-sm" ng-show="myform.myAccount.$error.min || myform.myAccount.$error.max">输入值必须在3-6之间!</div>
</div>
</form>
<form id="css_form" class="form-horizontal" novalidate name="myform2" role="form">
<div class="form-group">
<label for="inputEmail" class="col-md-2 control-label">邮箱：</label>
<div class="col-md-2">
<!--输入框 -->
<input type="email" ng-model="user.email" name="myEmail" required class="form-control" id="inputEmail" placeholder="请输入邮箱地址"/>
</div>
<!-- 隐藏块，显示验证信息-->
<div class="alert alert-danger well-sm" ng-show="myform2.myEmail.$error.required">邮箱不能为空！</div>
<div class="alert alert-danger well-sm" ng-show="myform2.myEmail.$error.email">邮箱格式不正确!</div>
</div>
</form>
<!--按钮组-->
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<button class="btn btn-default" ng-disabled="model.submitButtonIsDisable">提交</button>
<button class="btn btn-default" ng-click="reset()">重置</button>
</div>
</div>
</div>
</div>
</div>
<script type='text/javascript' src='lib/angular/angular.js'></script>
<script type='text/javascript' src='lib/bootstrap-gh-pages/ui-bootstrap-tpls-0.10.0.js'></script>
<script type='text/javascript' src='app.js'></script>
</body>
</html>
运行结果：
二.嵌套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
<html>
<head>
<title>嵌套表单验证</title>
<link rel="stylesheet" href="lib/bootstrap-3.0.0/css/bootstrap.css">
<style>
#css_form input.ng-invalid.ng-dirty {
background-color: #FFC0CB;
}
#css_form input.ng-valid.ng-dirty {
background-color: #78FA89;
}
</style>
</head>
<body ng-controller="myCtrl">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="panel-title">表单验证</div>
</div>
<div class="panel-body">
<div class="row">
<form id="css_form" class="form-horizontal" novalidate name="myform" role="form">
<div class="form-group">
<label for="inputAccount" class="col-md-2 control-label">账号：</label>
<div class="col-md-2">
<!--输入框 -->
<input type="number" ng-model="user.account" min="3" max="6" name="myAccount" required class="form-control" id="inputAccount" placeholder="请输入3-6的整数"/>
</div>
<!-- 隐藏块，显示验证信息-->
<div class="alert alert-danger well-sm" ng-show="myform.myAccount.$error.required">账号不能为空！</div>
<div class="alert alert-danger well-sm" ng-show="myform.myAccount.$error.min || myform.myAccount.$error.max">输入值必须在3-6之间!</div>
</div>
<form id="css_form" class="form-horizontal" novalidate name="myform" role="form">
<div class="form-group">
<label for="inputEmail" class="col-md-2 control-label">邮箱：</label>
<div class="col-md-2">
<!--输入框 -->
<input type="email" ng-model="user.email" name="myEmail" required class="form-control" id="inputEmail" placeholder="请输入邮箱地址"/>
</div>
<!-- 隐藏块，显示验证信息-->
<div class="alert alert-danger well-sm" ng-show="myform.myEmail.$error.required">邮箱不能为空！</div>
<div class="alert alert-danger well-sm" ng-show="myform.myEmail.$error.email">邮箱格式不正确!</div>
</div>
</form>
</form>
<!--按钮组-->
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<button class="btn btn-default" ng-disabled="!myform.$valid">提交</button>
<button class="btn btn-default" ng-click="reset()">重置</button>
</div>
</div>
</div>
</div>
</div>
<script type='text/javascript' src='lib/angular/angular.js'></script>
<script type='text/javascript' src='lib/bootstrap-gh-pages/ui-bootstrap-tpls-0.10.0.js'></script>
<script type='text/javascript' src='app.js'></script>
</body>
</html>
运行结果：一切OK
但实际上不同名称的Form嵌套才算是真正的嵌套，下面我们来看嵌套Form与被嵌套Form名称不同的情况。
app.js同上实例
formValidation01.html
<html>
<head>
<title>嵌套表单验证</title>
<link rel="stylesheet" href="lib/bootstrap-3.0.0/css/bootstrap.css">
<style>
#css_form input.ng-invalid.ng-dirty {
background-color: #FFC0CB;
}
#css_form input.ng-valid.ng-dirty {
background-color: #78FA89;
}
</style>
</head>
<body ng-controller="myCtrl">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="panel-title">嵌套表单验证</div>
</div>
<div class="panel-body">
<div class="row">
<form id="css_form" class="form-horizontal" novalidate name="myform" role="form">
<div class="form-group">
<label for="inputAccount" class="col-md-2 control-label">账号：</label>
<div class="col-md-2">
<!--输入框 -->
<input type="number" ng-model="user.account" min="3" max="6" name="myAccount" required class="form-control" id="inputAccount" placeholder="请输入3-6的整数"/>
</div>
<!-- 隐藏块，显示验证信息-->
<div class="alert alert-danger well-sm" ng-show="myform.myAccount.$error.required">账号不能为空！</div>
<div class="alert alert-danger well-sm" ng-show="myform.myAccount.$error.min || myform.myAccount.$error.max">输入值必须在3-6之间!</div>
</div>
<form id="css_form" class="form-horizontal" novalidate name="myform2" role="form">
<div class="form-group">
<label for="inputEmail" class="col-md-2 control-label">邮箱：</label>
<div class="col-md-2">
<!--输入框 -->
<input type="email" ng-model="user.email" name="myEmail" required class="form-control" id="inputEmail" placeholder="请输入邮箱地址"/>
</div>
<!-- 隐藏块，显示验证信息-->
<div class="alert alert-danger well-sm" ng-show="myform2.myEmail.$error.required">邮箱不能为空！</div>
<div class="alert alert-danger well-sm" ng-show="myform2.myEmail.$error.email">邮箱格式不正确!</div>
</div>
</form>
</form>
<!--按钮组-->
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<button class="btn btn-default" ng-disabled="!myform.$valid && !myform2.$valid">提交</button>
<button class="btn btn-default" ng-click="reset()">重置</button>
</div>
</div>
</div>
</div>
</div>
<script type='text/javascript' src='lib/angular/angular.js'></script>
<script type='text/javascript' src='lib/bootstrap-gh-pages/ui-bootstrap-tpls-0.10.0.js'></script>
<script type='text/javascript' src='app.js'></script>
</body>
</html>
运行效果：提交按钮的状态控制正确，但被嵌套Form的验证信息一直没有显示。修改formValidation01.html，在被嵌套的myform2上加一个Controller，效果也一样。
进一步调试跟踪发现，当前$scope下只有myform，而没有myform2，如下所示：
当然，如果在被嵌套的form上加一个控制器，并修改被嵌套的form的name与嵌套form的name一样，一切OK。但这样的话，为什么要嵌套一个form还加一个多余的controller呢？这些都是多余的。
相关推荐
漂亮大气的bootstrap表单,angularJs表单验证 ，是angularJs入门很好的例子
本文实例讲述了AngularJS自定义表单验证功能。分享给大家供大家参考，具体如下： Angular实现了大部分常用的HTML5的表单控件的类型(text, number, url, email, date, radio, checkbox)，也实现了很多指令做为验证...
angular_form angularJs表单和验证的基本模板 这只是我的Angular JS格式记录和基本验证格式的基本模板，需要基本样式，但可以使用。
开始学习AngularJS表单验证： 常用的表单验证指令 1. 必填项验证 某个表单输入是否已填写，只要在输入字段元素上添加HTML5标记required即可： 复制代码 代码如下:<<input type=”text” required /> 2....
基本验证 验证插件messages 自定义验证 基本验证 <form name="form" novalidate ng-app> <span>{{form.$invalid}} <span>{{form.$valid}} <span>{{form.$dirty}} <span>{{form.$pristine}} <input ...
AngularJS的表单验证大致有两种，一种是手动验证，一种是自动验证。 一、手动验证 所谓手动验证是通过AngularJS表单的属性来验证。而成为AngularJS表单必须满足两个条件： 1、给form元素加上novalidate=”novalidate...
两种表单1隐式和formBuilder，表单验证。
表单验证-angularjs-example 如何使用 AngularJS 进行表单验证
所谓手动验证是通过AngularJS表单的属性来验证，而成为AngularJS表单必须满足两个条件： 1、给form元素加上novalidate=”novalidate”； 2、给form元素加上name=”theForm”， 如下： <!DOCTYPE html> <...
本文实例为大家分享了AngularJS实现表单验证功能的具体代码，供大家参考，具体内容如下 <!--实例解析 ng-app 指令定义了 AngularJS 应用。 ng-controller 指令定义了应用控制器。 ng-model 指令绑定了两个 input...
AngularJS提供了很方便的表单验证功能，在此记录一番。 首先从下面这段代码开始 代码如下: <form ng-app=”myApp” ng-controller=”validationController” name=”mainForm” novalidate> <p>Email: &...
代码很简单，就不多废话了，直接奉上代码： 代码如下: <!doctype html> <html> <head> <meta charset=”utf-8″> <title>无标题文档</title> </head> [removed] [removed] ...
angular表单验证，弹出新增页面，阻止连续双击保存多条记录
AngularJS UI 表单验证（引导程序） ... 项目状态：（开发中） 安装 鲍尔 bower install ui-form-validation 用法 在 HTML 中包含脚本位置： [removed][removed] 在您的应用程序中添加uiFormValidation模块： ...
优雅的 AngularJS 表单验证...为什么是另一个验证器github 中有很多表单验证模块，但是没有找到 100% 符合 AngularJS 语法的验证器。 所有这些都通过忽略 AngularJS 语法、 ng-minlength 、 min 、 max等使用自己的语法
AngularJS自带了很多验证，什么必填，最大长度，最小长度…，这里记录几个有用的正则式验证 1.使用angularjs的表单验证 正则式验证 只需要配置一个正则式，很方便的完成验证，理论上所有的验证都可以用正则式完成 /...
能够根据用户在表单中输入的内容给出实时视觉反馈是非常重要的。...AngularJS提供了很多表单验证指令。 <form name=form novalidate> <label name=email>Your email <input type=email name=
做开发这么久一直被表单验证这个看似简单又不简单的东西搞得非常烦躁，于是写了个表单验证的框架，再也不用担心这个心烦的验证了。 这里使用AngularJS的指令进行处理代码及其简洁明了 下面是指令JS代码 app....
AngularJS的另外一种表单验证方式是自动验证，即通过directive来实现，除了AngularJS自带的directive,还需要用到angular-auto-validate这个第三方module。 有关angular-auto-validate： 安装：npm i angular-auto-...
本文实例讲述了AngularJS验证信息框架的封装插件用法。分享给大家供大家参考，具体如下： AngularJS 的表单验证规则 angular.js 的表单验证规则有 required(必填项)，type=”number”(必须为数字)，type=”email”...