- 首页
- 其他开发
- 当提交按钮位于此表单之外时，如何使用 angularJs 验证表单?
当提交按钮位于此表单之外时，如何使用 angularJs 验证表单?
[英] How to validate a form when the submit button is outside of this form, with angularJs?
本文介绍了当提交按钮位于此表单之外时，如何使用 angularJs 验证表单?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个用 AngularJS 创建的表单元素，里面有一个提交按钮，我想把这个按钮放在这个表单之外.我如何使用 Angular 做到这一点，并且我的表单仍然经过验证?
例如主要的 html 代码:
<!-- 面板地址--><div id="sd-p-chk-1" class="large-8 列 sd-p-chk"><div class="cover step_complete" ng-show="step_01" ng-hide="!step_01">
<sd-panel-address ><!-- 第一种形式--></sd-panel-address>
<!--/.面板地址 --><!-- 面板交付--><div id="sd-p-chk-2" class="large-8 列 sd-p-chk"><div class="cover" ng-show="!step_01" ng-hide="step_01"></div><sd-panel-delivery><!-- 第二种形式--></sd-panel-delivery><div class="cover step_complete" ng-show="step_02" ng-hide="!step_02"></div>
<!--/.面板交付 --><!-- 面板支付--><div id="sd-p-chk-3" class="large-8 列 sd-p-chk"><div class="cover" ng-show="!step_02" ng-hide="step_02"></div><sd-panel-payment><!-- 第三种形式--></sd-panel-payment>
<!--/.面板付款 --><!-- 群组按钮提交--><div class="sd-chk-box"><div class="sd-chk-box-inner"><div class="large-8 列 sd-box-chk-btn sd-chk-btn-sm"><button ng-click="clickBtn(shipping.$valid)" type="submit" class="sd-chk-btn sd-button-cta" ng-disabled="shipping.$invalid">下一个
<div class="large-8 列 sd-box-chk-btn sd-chk-btn-sm"><button class="sd-chk-btn sd-button-cta" ng-click="clickBtnStep02(formDelivery.$valid)" ng-disabled="formDelivery.$invalid">下一个
<div class="large-8 列 sd-box-chk-btn sd-chk-btn-sm"><button class="sd-chk-btn sd-button-cta" ng-click="clickBtnStep03(payment.$valid)" ng-disabled="payment.$invalid">下订单
<!--/.群组按钮提交 -->
例如表单 html 代码:
例如控制器代码:
(function() {'使用严格';/*** @ngdoc 函数* @name myApp.controller:globalCtrl* @描述* # 全局控件* myApp 的控制器*/var myApp = angular.module('myApp');myApp.controller('globalCtrl', function($scope, $locale, $rootScope) {//检查复选框是否被选中$scope.checked = true;//进入第 2 步$scope.clickBtn = 函数(表单){//有效形式如果(形式 === 真){console.log('表单有效，$rootScope.step_01=' + $rootScope.step_01);$rootScope.step_01 = 真；$rootScope.notValidStpe_01 = true;}//无效形式如果(形式 === 假){$rootScope.step_01 = 假；$rootScope.notValidStpe_01 = false;console.log('表单无效，$rootScope.step_01=' + $rootScope.step_01);}};//到第 3 步$scope.clickBtnStep02 = 函数(表单){//有效形式如果(形式 === 真){console.log('表单有效，$rootScope.step_02 "'+ $rootScope.step_02);$rootScope.step_02 = 真；$rootScope.notValidStpe_02 = true;}//无效形式如果(形式 === 假){$rootScope.step_02 = 假；$rootScope.notValidStpe_02 = false;console.log('表单无效，$rootScope.step_02=' + $rootScope.step_02);}};//所有步骤完成$scope.clickBtnStep03 = 函数(表单){//有效形式如果(形式 === 真){console.log('表单有效，$rootScope.step_03 "'+ $rootScope.step_03);$rootScope.step_03 = 真；$rootScope.notValidStpe_03 = true;}//无效形式如果(形式 === 假){$rootScope.step_03 = 假；$rootScope.notValidStpe_03 = false;console.log('表单无效，$rootScope.step_03=' + $rootScope.step_03);}};});}(window, window.angular));在这里输入代码
例如 app.js 代码
(function() {'使用严格';var myApp = 角度.module('myApp', ['ngResource','ngAnimate','ngMessages','模板']);myApp.run(function($rootScope) {$rootScope.step_01 = 假；$rootScope.step_02 = 假；$rootScope.step_03 = 假；$rootScope.notValidStpe_01 = false;$rootScope.notValidStpe_02 = 假；$rootScope.notValidStpe_03 = false;});}(window, window.angular));
解决方案
据我所知，您尝试做表单向导.但是，您不需要多个表单元素，只需在顶部使用一个表单元素即可.对于子表单，使用 ng-form 指令来分别验证它们.
您可以找到详细的文档https://docs.angularjs.org/api/ng/directive/ngForm 关于使用 ng-form
类似的东西
I have a form element created with AngularJS with a submit button within it and I would like to put this button outside of this form. How can I do that with Angular and have my form still validated?
e.g main html code:
<div class="sd-chk-steps" ng-show="!step_03" ng-hide="step_03">
<!-- Panel Address -->
<div id="sd-p-chk-1" class="large-8 columns sd-p-chk">
<div class="cover step_complete" ng-show="step_01" ng-hide="!step_01">
</div>
<sd-panel-address >
<!-- first form -->
</sd-panel-address>
</div>
<!-- /. Panel Address -->
<!-- Panel delivery -->
<div id="sd-p-chk-2" class="large-8 columns sd-p-chk">
<div class="cover" ng-show="!step_01" ng-hide="step_01"></div>
<sd-panel-delivery>
<!-- second form -->
</sd-panel-delivery>
<div class="cover step_complete" ng-show="step_02" ng-hide="!step_02"></div>
</div>
<!-- /. Panel delivery -->
<!-- Panel payment -->
<div id="sd-p-chk-3" class="large-8 columns sd-p-chk">
<div class="cover" ng-show="!step_02" ng-hide="step_02"></div>
<sd-panel-payment>
<!-- third form -->
</sd-panel-payment>
</div>
<!-- /. Panel payment -->
<!-- group botton submit -->
<div class="sd-chk-box">
<div class="sd-chk-box-inner">
<div class="large-8 columns sd-box-chk-btn sd-chk-btn-sm">
<button ng-click="clickBtn(shipping.$valid)" type="submit" class="sd-chk-btn sd-button-cta" ng-disabled="shipping.$invalid">
Next
</button>
</div>
<div class="large-8 columns sd-box-chk-btn sd-chk-btn-sm">
<button class="sd-chk-btn sd-button-cta" ng-click="clickBtnStep02(formDelivery.$valid)" ng-disabled="formDelivery.$invalid">
NEXT
</button>
</div>
<div class="large-8 columns sd-box-chk-btn sd-chk-btn-sm">
<button class="sd-chk-btn sd-button-cta" ng-click="clickBtnStep03(payment.$valid)" ng-disabled="payment.$invalid">
PLACE ORDER
</button>
</div>
</div>
</div>
<!-- /. group botton submit -->
e.g form html code:
<form id="shipping" class="shipping" name="shipping"
novalidate
ng-submit="form.submit(shipping.$valid)"
ng-class="{'loading': form.submitting, 'is-el-dirty' : shipping.$dirty || shipping.dirty}">
<fieldset>
<div class="row">
<div class="large-12 columns">
<label>
<input type="text" name="name" placeholder="Name" ng-model="form.data.name" required/>
</label>
<div class="error" ng-if="shipping.$submitted || shipping.name.$touched" ng-messages="shipping.name.$error">
<p class="text-msg" ng-message="required">You did not enter your name</p>
</div>
</div>
<div class="large-12 columns">
<label>
<input type="text" name="surname" placeholder="Surname" ng-model="form.data.surname" required/>
</label>
<div class="error" ng-if="shipping.$submitted || shipping.surname.$touched" ng-messages="shipping.surname.$error">
<p class="text-msg" ng-message="required">You did not enter your Surname</p>
</div>
</div>
</div>
</fieldset>
</form>
e.g controller code:
(function() {
'use strict';
/**
* @ngdoc function
* @name myApp.controller:globalCtrl
* @description
* # globalCtrl
* Controller of the myApp
*/
var myApp = angular.module('myApp');
myApp.controller('globalCtrl', function($scope, $locale, $rootScope) {
// Check if checkbox it's checked
$scope.checked = true;
// got to step 2
$scope.clickBtn = function(form) {
//valid form
if (form === true) {
console.log('Form is valid, $rootScope.step_01= ' + $rootScope.step_01);
$rootScope.step_01 = true;
$rootScope.notValidStpe_01 = true;
}
//invalid form
if (form === false) {
$rootScope.step_01 = false;
$rootScope.notValidStpe_01 = false;
console.log('Form is invalid, $rootScope.step_01= ' + $rootScope.step_01);
}
};
// got to step 3
$scope.clickBtnStep02 = function(form) {
//valid form
if (form === true) {
console.log('Form is valid, $rootScope.step_02 "'+ $rootScope.step_02);
$rootScope.step_02 = true;
$rootScope.notValidStpe_02 = true;
}
//invalid form
if (form === false) {
$rootScope.step_02 = false;
$rootScope.notValidStpe_02 = false;
console.log('Form is invalid, $rootScope.step_02= ' + $rootScope.step_02);
}
};
// All steps completed
$scope.clickBtnStep03 = function(form) {
//valid form
if (form === true) {
console.log('Form is valid, $rootScope.step_03 "'+ $rootScope.step_03);
$rootScope.step_03 = true;
$rootScope.notValidStpe_03 = true;
}
//invalid form
if (form === false) {
$rootScope.step_03 = false;
$rootScope.notValidStpe_03 = false;
console.log('Form is invalid, $rootScope.step_03= ' + $rootScope.step_03);
}
};
});
}(window, window.angular));enter code here
e.g app.js code
(function() {
'use strict';
var myApp = angular
.module('myApp', [
'ngResource',
'ngAnimate',
'ngMessages',
'templates'
]);
myApp.run(function($rootScope) {
$rootScope.step_01 = false;
$rootScope.step_02 = false;
$rootScope.step_03 = false;
$rootScope.notValidStpe_01 = false;
$rootScope.notValidStpe_02 = false;
$rootScope.notValidStpe_03 = false;
});
}(window, window.angular));
解决方案
As I understand You try to do form wizzard. However you don't need multiple form element, Just use one form element at the top. For child form use ng-form directive to valiadate them seperately.
You can find detailed documentation https://docs.angularjs.org/api/ng/directive/ngForm about using ng-form
Something like this
<form id="complateOrder" name="orderForm" ng-init="showShippingForm = true">
<div ng-form="" name="shipping" ng-show="showShippingForm">
shippig fields
<button type="button" ng-disabled="shipping.$invalid" ng-click="showDeliveryForm=true">Next</button>
</div>
<div ng-form="" name="delivery" ng-show="showDeliveryForm && shipping.$valid" ng-hide="shipping.$invalid" >
delivery fields
<button type="button" ng-disabled="shipping.$invalid && delivery.$invalid" ng-click="showPaymentForm=true">Next</button>
</div>
<div ng-form="" name="payment" ng-show="showPaymentForm && shipping.$valid && delivery.$valid " ng-hide="shipping.$invalid && delivery.$invalid">
payment fields
<button type="submit" ng-disabled="orderForm.$invalid && shipping.$invalid && payment.$invalid && delivery.$invalid">Submit All</button>
</div>
<div>
<button type="button" ng-click="showPaymentForm ? (showPaymentForm = false; showDeliveryForm= true):showDeliveryForm ? (showDeliveryForm=false; showShippingForm = true):showShippingForm = true">Prev</button>
</div>
</form>
这篇关于当提交按钮位于此表单之外时，如何使用 angularJs 验证表单?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
