title: Angular form - How to disable ngSubmit event when the form is invaild?
body: <pre><code>&lt;div&gt;
    &lt;form (ngSubmit)="mySubmit()" #msgBoxForm="ngForm"&gt;
      &lt;button mat-raised-button color="accent" (click)="rollDice()"&gt;
        RollDice
      &lt;/button&gt;
      &lt;input
        type="text"
        name="msgInputBox"
        [(ngModel)]="TextMessage"
        required
        #box (keyup.enter)="enterSubmit()"
        placeholder="Message" &gt;
      &lt;button
        type="submit"
        class="btn btn-success"
        [disabled]="!msgBoxForm.form.valid"&gt;
        Submit
      &lt;/button&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Now when input box is empty, though the submit button will be disabled, press enter will call both enterSubmit() and mySubmit() method. Even click RollDice button which has no "submit" type, will also call mySubmit(). How can I call mySubmit() only when I click the Submit button?</p>