AngularJs - отправьте форму программно

Question

Я прочитал несколько ответов на эту тему, но они не относятся к моей проблеме.Моя проблема довольно сложная.У меня есть форма, которая использует ReportViewer.ASPX.Форма определяется следующим образом:

<form name="form" novalidate role="form"
          sm-dirty-check
          id="reportViewer"
          method="post"
          action="~/Infrastructure/ReportViewer/reportViewer.aspx"
          target="viewerIFrame"          
          ng-show="crud.showForm" class="ng-cloak">

       @* Form inputs *@
        <input type="hidden" name="labelType" value="Rental" />
        <input type="hidden" name="labelLayoutId" value="{{ crud.model.lbLayoutId }}" />
        <input type="hidden" name="itemsToPrint" value="{{ crud.jsItemsToPrint }}" />

Фактические формы определяются на вкладках с помощью ng-формы (я разделил только верхнюю часть моей формы редактирования, которая имеет отношение к моему вопросу).

У меня также есть эти кнопки внизу формы:

    <button type="submit"
            ng-if="crud.model.lbLayoutId!==0"
            name="generateLabelButton"
            id="generateLabelButton"
            class="btn btn-primary pull-left"
            ng-click="crud.generateLabel()"
            ng-disabled="crud.isSaveButtonDisabled">
        @Labels.generateLabel
    </button>
    <div class="pull-left generateLabelButton">
        <data-desc:type ng-if="crud.model.lbLayoutId===0"
                        value="@Labels.generateLabel"
                        keep-pristine="true"
                        on-after-selection="crud.layoutSelected(selectedValue)"
                        title="{{ '@string.Format(Labels.selectX, Labels.labelLayout)'}}"
                        param="layouts"
                        message="@string.Format(Labels.selectX, Labels.labelLayout)"
                        selected="crud.model.lbLayoutId"
                        descrip-value="descrip"
                        id="layoutPickerButton"
                        name="layoutPickerButton"
                        button-type="button"
                        type="7"
                        filter-by="Label"
                        description="crud.model.lbLayout">
        </data-desc:type>
    </div>

Итак, если у меня определен lblLayoutId, у меня есть обычная кнопка отправки, и я нажимаю ее и отправляю формуи все хорошо.

Если у меня нет определенного lblLayoutId (это 0), мне нужно использовать директиву, которая имеет шаблон для кнопки, когда я нажимаю ее, она открывает модальную форму длявыбрать макет и т. д.

Итак, моя проблема в том, что после того, как я выбрал макет, мне нужно отправить форму, чтобы появился ярлык.

Я попытался сделать так, чтобы директивавведите submit (свойство типа кнопки), это не сработало.

Я также попробовал следующий код в методе, который выполняется кнопкой при выборе значения:

rentalEquipmentsCrudController.prototype.layoutSelected = function (selectedValue) {
    this.model.lbLayoutId = selectedValue;
    $("#generateLabelButton").click();        
}
rentalEquipmentsCrudController.prototype.generateLabel = function () {
    if (this.model.lbLayoutId === 0) return;
    this.jsItemsToPrint = "";
    this.itemsToPrint = this.getItemsToPrint();

    this.jsItemsToPrint = JSON.stringify(this.itemsToPrint);


    angular.element($("#viewerIFrame").contents()
      .find("#reportViewer_ReportViewer")).empty();
    let actionPath = angular.element($("#reportViewer")).attr("action");
    if (actionPath.slice(-3) !== "pdf") actionPath += "/Labels.pdf";

    angular.element($("#reportViewer")).attr("action", actionPath);
    this.showViewer = true;

};

Метод layoutSelected выполняется из моей директивы, а следующий код выполняется моей обычной кнопкой.

Итак, я не знаю, как заставить его работать.

Answer 1

Роль форм в клиентских приложениях AngularJS отличается от классических двусторонних приложений, поэтому желательно, чтобы браузер не переводил отправку формы в полную перезагрузку страницы. Вместо этого отправляйте данные JSON и получайте ответы с данными JSON. Идите на сервер за данными, но не в html / js / css и т. Д.

Чтение AngularJS <form> Директива API Reference - Отправка формы и предотвращение действия по умолчанию .

Answer 2

Вы не хотите комбинировать ng-click с кнопкой type="submit", это все равно приведет к отправке формы (не программно). Вместо этого используйте type="button". Кроме того, вы можете оставить type="submit", но добавить ng-submit="crud.generateLabel()" к элементу формы

<form>
  ...
  <button type="button" ng-click="crud.generateLabel()">...</button>
</form>

В качестве альтернативы:

<form ng-submit="crud.generateLabel()">
  ...
  <button type="submit">...</button>
</form>