我正在尝试“拦截” angularjs应用程序的表单提交，以便可以验证几个字段具有值。如果没有，我将抛出一个错误并停止，但是如果一切正常，则提交可以继续进行。
该应用程序是打包的应用程序。一个关键的约束是不允许我对应用程序代码本身进行任何更改（指令模板，js代码等），以防止将来的升级出现问题。
我已经能够使用自包含的代码块满足大多数自定义要求，这些代码块放置在应用程序的主app.js文件的底部。如果删除此阻止，则该应用程序仍将像以前一样运行，但不适用于我的自定义设置。因此，我编写的任何代码都必须在此块内。我一直在使用jQuery。
我尝试使用jquery来更改Submit按钮的类型并拦截Submit操作，但是这些都没有用。
这是我自包含块中的功能
function createCustomerHandler() {
$('body').on('DOMNodeInserted.ra', function() {
if ($('.modal').length && angular.element($(".modal")).scope().state.dataIsLoading != undefined && !angular.element($(".modal")).scope().state.dataIsLoading) {
$('body').off('DOMNodeInserted.ra');
console.log("modal is present.");
var modalScope = angular.element("div[modal-window='modal-window']").scope();
if (modalScope.person.type != undefined && modalScope.person.type == "person") {
console.log("a person");
$(document).ready(function() {
modalScope.person.company.name = "";
.
.
REST OF FUNCTION CODE
.
.
$("form").submit(function(e) {
e.preventDefault();
console.log("CREATE CUSTOMER FORM SUBMIT");
let form = this;
form.submit(); // submit bypassing the jQuery bound event
});
});
}
}
});
};
这是我尝试拦截的应用程序中的表单
<form name="createCustomerForm" novalidate="" class="ng-pristine ng-invalid ng-invalid-required ng-valid-maxlength">
<div class="create-ticket__header">
<h3 class="create-ticket__header-title ng-binding">Create Customer</h3>
<span class="ng-binding">Complete fields and "Save"</span>
</div>
<div class="create-ticket__full-width-section smart-recorder__create-customer-outer">
<div class="row">
<div class="col-sm-6 create-ticket__section">
<!--First Name-->
<div class="col-sm-8 smart-recorder__create-customer-col8">
<div class="person-profile-form-item">
<label class="label_control-wrap">
<span class="label__text_required ng-binding required__label" potentially-required-field="" field-name="firstName" entity="person" data-required="(required)">
First Name
</span>
<div class="create-ticket__item">
<input name="firstName" class="form-control ng-pristine ng-invalid ng-invalid-required ng-valid-maxlength ng-touched" type="text" ng-model="person.firstName" potentially-required-field="" field-name="firstName" entity="person" maxlength="30" auto-focus="" required="" aria-required="true">
</div>
</label>
</div>
</div>
.
.
Other form fields
.
.
.
And an example of one of the fields I need to check when intercepting the submit
.
.
<div class="dropdown-input full-width ng-isolate-scope" dropdown="" is-open="state.isOpen" selection-items="selections.companies" selected-item="person.company" selection-callback="updateCompany(item)" title-text="Company" label="name" value="name" update-selected-item="true" selection-filter="true" selection-filter-placeholder-text="assignBlade.searchCompany" typeahead-mode="state.tooManyCompanies" typeahead-details="company as company.name for company in getList($viewValue)" typeahead-get-list="getCompaniesByName(name)" potentially-required-field="" entity="person" aria-required="true">
<button type="button" class="dropdown-input__button dropdown-toggle ng-binding ng-invalid-required" ng-class="{'ng-invalid-required' : !selectedItem && required}" aria-required="true" id="" ng-disabled="disabledSelection" title="Company Select one" aria-haspopup="true" aria-expanded="false">
Select one
</button>
<!-- ngIf: !disabledSelection && showClear && selectedItemValue -->
<input type="text" potentially-required-field="" field-name="" entity="entity" style="display: none;" name="person.company" ng-required="required" ng-model="selectedItem" class="ng-pristine ng-untouched ng-valid ng-valid-required">
<ul class="dropdown-menu full-width">
<!-- ngIf: selectionFilter && !typeaheadMode --><li class="dropdown-item__header ng-binding ng-scope" ng-if="selectionFilter && !typeaheadMode">Search</li><!-- end ngIf: selectionFilter && !typeaheadMode -->
<!-- ngIf: selectionFilter && !typeaheadMode --><li class="dropdown-item_search-bar ng-scope" ng-if="selectionFilter && !typeaheadMode">
<i class="icon-search dropdown-item_search-icon"></i>
<input title="Search for a company" prevent-click-event="" class="dropdown-item_search ng-pristine ng-untouched ng-valid" type="text" ng-model="searchFilterText" ng-keyup="handleKeyup($event)" ng-keydown="handleKeydown($event)" placeholder="Search for a company">
</li><!-- end ngIf: selectionFilter && !typeaheadMode -->
<!-- ngIf: typeaheadMode -->
<!-- ngIf: loadingFlag -->
<!-- ngIf: firstItemEmpty && !typeaheadMode -->
<!-- ngRepeat: selectionItem in selectionItems | filter : searchFilterText --><li ng-repeat="selectionItem in selectionItems | filter : searchFilterText" class="ng-scope">
<a class="dropdown-item" ng-click="itemSelected(selectionItem)" ng-keydown="handleKeydown($event)" href="javascript:void(0)" role="menuitem">
Calbro Services
</a>
</li><!-- end ngRepeat: selectionItem in selectionItems | filter : searchFilterText --><li ng-repeat="selectionItem in selectionItems | filter : searchFilterText" class="ng-scope">
<a class="dropdown-item" ng-click="itemSelected(selectionItem)" ng-keydown="handleKeydown($event)" href="javascript:void(0)" role="menuitem">
Centari Systems
</a>
</li><!-- end ngRepeat: selectionItem in selectionItems | filter : searchFilterText --><li ng-repeat="selectionItem in selectionItems | filter : searchFilterText" class="ng-scope">
<a class="dropdown-item" ng-click="itemSelected(selectionItem)" ng-keydown="handleKeydown($event)" href="javascript:void(0)" role="menuitem">
Invention, Inc.
</a>
</li><!-- end ngRepeat: selectionItem in selectionItems | filter : searchFilterText -->
</ul>
</div>
.
.
.
And finnally, the definition of the submit button
.
.
.
<button type="submit" class="btn_primary create-ticket__action-btn ng-binding" ng-disabled="createCustomerForm.$invalid || state.dataIsLoading" ng-click="createPerson()" disabled="disabled">
Save
</button>
无论更改按钮类型，还是使用jquery .submit事件，我都无法截获单击按钮时发生的情况，因此调用了createPerson函数，该函数对应用程序的后端执行REST调用，然后由于失败而失败丢失数据。
但是应用程序的编码方式不会产生错误，这种错误不会导致用户不清楚，因为缺少的值是在OOTB代码中预设的，也是我自定义的一部分是要删除这些预设并使用户不得不选择它们。
如果任何人都可以看到如何做，那将真的很有帮助。