Я пытаюсь «перехватить» отправку формы приложением angularjs, чтобы я мог проверить, что пара полей имеет значения.Если этого не произойдет, я выдам ошибку и остановлюсь, но если все в порядке, то отправка может продолжаться как обычно.
Приложение представляет собой упакованное приложение.Одним из ключевых ограничений является то, что мне не разрешается вносить какие-либо изменения (шаблоны директив, js-код и т. Д.) В сам код приложения, чтобы предотвратить проблемы с будущими обновлениями.
Мне удалось достичь большинстватребования к настройке с использованием автономного блока кода, который размещается в нижней части основного файла app.js приложения.Если этот блок будет удален, приложение все равно будет работать как прежде, только не с моими настройками.Поэтому любой код, который я пишу, должен находиться внутри этого блока.Я использовал JQuery.
Я попытался с помощью jquery изменить тип кнопки отправки, а также перехватить действие отправки, но ни один из них не сработал.
Вот функция из моего автономного блока
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 и его частимоей настройкой было убрать эти предустановки и заставить пользователя выбирать их.
Если кто-нибудь может понять, как это сделать, это было бы очень полезно.