angularjs - 从指令触发 ng-submit
问题描述
已经提出了这种类型的类似问题,我遵循了所有建议,但仍然无法从指令触发提交。我有多个表单元素用于多步骤表单验证,并且我有一个单击按钮来验证所有表单。这是html。
<form name="employeePersonalForm" ext-submit
ng-submit="emp.submittedForm(employeePersonalForm)" novalidate>
<div layout="row">
<div class="default-form-item pr-3" ng-class="{'md-input-invalid': employeePersonalForm.$submitted && employeePersonalForm.firstName.$invalid}" flex>
<label class="default-label required">First Name {{employeePersonalForm.firstName.$invalid}} - {{employeePersonalForm.$submitted}}</label>
<div class="default-input-wrapper">
<input ng-model="emp.firstName" class="default-input" name="firstName" type="text" required>
<p class="default-input-error">This field is required</p>
</div>
</div>
<div class="default-form-item pl-3" flex>
<label class="default-label required">Last Name</label>
<div class="default-input-wrapper">
<input ng-model="emp.lastName" class="default-input" type="text" required>
<p class="default-input-error">This field is required</p>
</div>
</div>
</div>
</form>
这种类型的多重表单存在于页面中。并且有一个外部按钮,如下所示。
<button class="default-btn default-btn--green" type="button" ng-click="nextStep($event)">Next</button>
单击下一步按钮时,我正在广播事件以提交表单。这是控制器部分。
emp.submittedForm = function(form) {
if($scope.step==1) {
alert(form.employeePersonalForm.$valid ? 'Valid' : 'Invalid!!!');
}
}
$scope.nextStep = function() {
if($scope.step == 1) {
$rootScope.$broadcast('makeSubmit', {formName: 'employeePersonalForm'})
}
};
我在指令 ext-submit 中捕获此事件,如下所示
(function () {
'use strict';
angular
.module('app')
.directive('extSubmit', ['$timeout', externalSubmit]);
/* @ngInject */
function externalSubmit($timeout) {
return {
link: function(scope, el, attr) {
scope.$on('makeSubmit', function(event, data){
if(data.formName === attr.name) {
$timeout(function() {
el.triggerHandler('submit');
}, 0, false);
}
})
}
};
}
})();
但它不会触发 ng-submit。我已经按照这个建议这个链接
解决方案
一种方法是简单地执行ng-submit
属性中的函数:
app.directive('extSubmit', ['$timeout', externalSubmit]);
/* @ngInject */
function externalSubmit($timeout) {
return {
require: "form",
link: function(scope, elem, attrs, form) {
scope.$on('makeSubmit', function(event, data){
if(data.formName === attrs.name) {
//SET submitted state
form.$setSubmitted();
//EVALUATE ng-submit
scope.$eval(attr.ngSubmit);
//$timeout(function() {
// elem.triggerHandler('submit');
//}, 0, false);
}
})
}
};
}
})
有关详细信息,请参阅
推荐阅读
- javascript - 如何从返回的对象中获取 JSON 条目
- flutter - LateInitializationError:字段“数据”尚未初始化,出现错误
- javascript - 返回一个承诺节点js
- python - 视频证明:为什么我在运行我的机器人时会收到 CloudFlare 1020 错误?
- tomcat8 - 热衷于使用 JSF 1.2 (Icefaces 1.8) 和 Tomcat 8?
- java - 来自简单 Java 程序的链表 ProductOperation()
- sql - 当其他用户可以更新和更改记录分区时,Postgresql 更新表
- c# - 为什么我的函数应用程序启动中注入的 DelegatingHandler 上的 SendAsync 永远不会被调用?
- reactjs - 找不到模块:无法解析 '*.module.css'
- python - PySpark 等效于 pandas .isin()