How does angular know the button is the submit button

Question

When i hit the button which is not defined as submit, submit(formAccessor) button works. I am curious about this behaviour because i did not define it as submit button. In fact when i add another button in the form, it also submits. How can i put a button into the form and give it another behaviour ? thaks

<form #formAccessor="ngForm" on-ngSubmit="submit(formAccessor)">
    <div class="form-group">
        <label for="id">ID </label>
        <input ngModel  name="id" id="id" #idAccessor="ngModel" type="text" class="form-control">

    </div>
    <div class="form-group">
        <label for="dataModelVersion">Data Model Version </label>
        <input id="dataModelVersion" type="text" class="form-control">
    </div>
    <div class="form-group">
        <label for="orderId">orderId </label>
        <input id="orderId" type="text" class="form-control">
    </div>


    <button class="btn btn-primary pull-right">Submit</button>
</form>

I guess a button within a form defaults to `type="submit"` https://stackoverflow.com/questions/9643806/form-is-submitted-when-i-click-on-the-button-in-form-how-to-avoid-this — Günter Zöchbauer, Aug 01 '17 at 07:56

score 1 · Answer 1 · answered Aug 01 '17 at 08:05

This behaivour is not Angular related. That's basically how your browser intreprets a button on its own. You can see here, even without Angular, the button still behaves as it would be a submit button.

<form>
  <input required>
  <button>
    Click
  </button>
</form>

However if you specify a type to that button it behaves as it should. So you may assign the type button which will not trigger the form action/submit, as shown here.

<form>
  <input required>
  <button type="button">
    Click
  </button>
</form>

How does angular know the button is the submit button

1 Answers1