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-form 在选项卡中定义的（我只分享了与我的问题相关的编辑表单的顶部）。

我在表单底部也有这些按钮：

    <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），我需要使用一个具有按钮模板的指令，当我按下它时，它会打开一个模式表单来选择布局等。

所以，我的问题是，在我选择了布局之后，我需要提交我的表单，这样标签才能出现。

我尝试将指令设置为提交类型（按钮类型属性），但没有成功。

我还在选择值时按钮执行的方法中尝试了以下代码：

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> Directive API Reference - Submitting a form and preventing the default action。

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>