为什么Angular模板中的常规HTML表单不提交？

Question

I have an Angular 6 component with a HTML form in it, and I'd like the form to work as a conventional HTML form: it should make a POST request to the action URL and take the user to the response page. No Ajax.

The problem is, I can click the button all day long, and it doesn't submit. Is Angular intercepting the "submit" action and preventing it from proceeding? How do I fix it?

This is the code:

  <form name="myform" id="myform" method="post" action="/url/for/post/request">
    <input type="hidden" name="selecteddata" value="{{userselection}}">
  <button type="submit" class="btn btn-primary my-2" [disabled]="userselection.length==0">Submit {{userselection.length}} selection(s)</button>
  </form>

What I'm calling userselection here is a programmatic property of the component (ie defined by get and set functions) and it doesn't seem to be the source fo the problem. The disabled property works correctly and as long as there's a userselection the button is enabled for clicking.

Nothing happens and no error message appears in the console.

I have also tried this with target="_blank" in the <form> tag, and still nothing happens. No new tab or window opens.

Answer 1

I cannot explain why Angular was intercepting the submit event, but combing the documentation I eventually discovered there's a ngNoForm directive you can use to prevent Angular from adding a hidden NgForm directive. Adding that tag seemed to fix my problem. The code is now...

  <form ngNoForm method="post" action="/url/for/post/request">
    <input type="hidden" name="selecteddata" value="{{userselection}}">
  <button type="submit" class="btn btn-primary my-2" [disabled]="userselection.length==0">Submit {{userselection.length}} selection(s)</button>
  </form>