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呢?这些都是多余的。
相关推荐
本示例以"AngularJs demo 例子(表单验证)form"为主题,结合bootstrap美化,展示了如何在AngularJS中实现表单验证。 **1. AngularJS 表单基础** 在AngularJS中,表单是由`<form>`标签定义的,可以通过`ngForm`或`...
在AngularJS中,表单验证是一项关键功能,它允许开发者实时检查用户输入的数据,确保其符合预期的格式和规则,从而提高用户体验并减少服务器端的压力。AngularJS的表单验证机制是基于模型驱动的,这使得它在处理复杂...
这里,`[(ngModel)]`实现了双向数据绑定,`required`是表单验证的一部分,`[disabled]`根据表单的有效性禁用提交按钮。 2. **响应式表单**: 响应式表单更灵活,它基于RxJS库,允许在组件类中创建和操作表单模型...
AngularJS中的表单由`<form>`标签定义,通过`ngForm`指令与AngularJS进行绑定。表单内的输入控件通常会带有`ngModel`指令,用于双向数据绑定,使控件值与控制器中的变量同步。 二、内置验证指令 AngularJS内置了...
-AngularJS提供了多个内置指令来进行表单验证,如`required`(必须填写)、`email`(邮箱格式验证)、`minlength`(最小长度)、`maxlength`(最大长度)、`pattern`(正则表达式匹配)等。 - 在`<form>`标签中...
在AngularJS2中,表单和验证是构建交互式用户界面的重要组成部分。AngularJS2引入了新的表单处理机制,提供了更加灵活和强大的方式来管理表单数据和验证。以下是关于"AngularJS2表单+验证"的知识点详解: 1. **隐式...
本文实例讲述了AngularJS自定义表单验证功能。分享给大家供大家参考,具体如下: Angular实现了大部分常用的HTML5的表单控件的类型(text, number, url, email, date, radio, checkbox),也实现了很多指令做为验证...
让我们深入探讨这个"angular_form"项目,它是AngularJS中关于表单和验证的一个基础模板。 首先,`angular_form-master`是一个项目的目录名,通常在GitHub等版本控制系统中使用,表示这是一个项目的主分支或最新版本...
在AngularJS中,表单(form)是数据绑定和用户交互的核心组件,它允许开发者创建动态、响应式的Web界面。本篇文章将深入讲解如何在AngularJS中使用表单以及相关的方法和示例。 首先,AngularJS中的表单是通过`ng-...
本篇文章将深入探讨AngularJS中的表单(Form)处理,特别是远程验证和自定义输入项的实现方法。 ### 1. 表单基础 在AngularJS中,表单通过`ng-form`指令进行创建,可以方便地与Angular的数据模型进行双向绑定。每...
开始学习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中的表单验证机制,主要包括以下几个...
例如,可以设置name="theForm",这样,你就可以在AngularJS中通过名字theForm来引用这个表单,并使用它提供的验证方法和属性进行手动验证。 AngularJS的表单验证分为两种:客户端验证和服务器端验证。客户端验证是...
这可以通过创建一个返回`Promise`或`Observable`的函数实现,并将其作为验证器添加到`FormControl`。 5. **自定义验证器** 当内置的验证器不能满足需求时,可以创建自定义验证器函数。这个函数接收`FormControl`...
首先,AngularJS对表单验证提供了内置指令和属性,其中最关键的是form标签的name属性和控件的ngModel指令。在form标签上赋予一个name属性,可以让我们通过该name引用表单对象,在JavaScript中对表单的状态进行操作。...
在AngularJS中,表单验证是确保用户输入符合预设规则的关键功能,它有助于提高用户体验并确保数据的准确性。AngularJS提供了两种表单验证方式:手动验证和自动验证。本文将详细探讨自动验证机制,特别是如何利用...