AngularJs - submit the form programmatically

Question

I read several answers on this topic but they don't seem to apply to my problem. My problem is quite complex. I have a form which uses ReportViewer.ASPX. The form is defined as following:

<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 }}" />

The actual forms are defined in the tabs using ng-form (I only shared the top portion of my Edit form which is relevant to my question).

I also have these buttons at the bottom of the 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>

So, if I have lblLayoutId defined, I have my regular submit button and I press it and get my form submitted and all is well.

If I don't have the lblLayoutId defined (it's 0), I need to use a directive which has a template for a button, when I press it, it opens a modal form to pick the layout, etc.

So, my problem is that after I picked the layout, I need to submit my form so the label can appear.

I tried making the directive to be of type submit (button-type property), this didn't work.

I also tried the following code in the method which is executed by the button when value is selected:

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;

};

The layoutSelected method is executed from my directive and the next code is executed by my regular button.

So, I'm at lost as how to make it work.

Answer 1

The role of forms in client-side AngularJS applications is different than in classical roundtrip apps, it is desirable for the browser not to translate the form submission into a full page reload. Instead post JSON data and receive JSON data responses. Go to the server for data, but not html/js/css etc.

Read AngularJS <form> Directive API Reference - Submitting a form and preventing the default action.

Answer 2

You don't want to combine ng-click with a button of type="submit", this will still cause the form to submit (non-programmatically). Instead, use type="button". Alternatively, you can keep type="submit" but add the ng-submit="crud.generateLabel()" to the form element

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

Alternatively:

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