title: Right way to use multiple buttons in angular form
body: <p>i am building a from with <a href="https://angular.io/guide/forms" rel="noreferrer">angular forms</a> and it works well with 1 button. But when i want to have 2 buttons, it is hard to handle. <br><br>
  I want to have 1 button <code>reset</code> and 1 button <code>submit</code>. <code>reset</code> must be placed before <code>submit</code>. Here is the template:</p>
  <pre><code>&lt;form (ngSubmit)=&quot;submit()&quot; [formGroup]=&quot;form&quot;&gt;
      //inputs...
      &lt;button type=&quot;submit&quot; (click)=&quot;reset($event)&quot;&gt;reset&lt;/button&gt;
      &lt;button type=&quot;submit&quot;&gt;submit&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  <p>When i press <code>enter</code> in one input, the <code>form</code> fire both <code>submit()</code> and   <code>reset($event)</code> function. It is the same when i click on <code>reset</code> button. My expectation is:</p>
  <ul>
  <li>When press <code>enter</code> or click <code>submit</code> button, the form only fire <code>submit()</code> function</li>
  <li>When click <code>reset</code> button the form only fire <code>reset()</code> function<br><br></li>
  </ul>
  <p>I can find a walk around is adding a hidden button before <code>reset</code>    button and call <code>event.stopPropagation(); event.preventDefault()</code> in    <code>reset()</code> function. But it is ugly. Is there a clean way to do it? Any    help would be appreciated. Many thanks!</p>