角度表单-表单损坏时如何禁用ngSubmit事件？

Question

<div>
  <form (ngSubmit)="mySubmit()" #msgBoxForm="ngForm">
    <button mat-raised-button color="accent" (click)="rollDice()">
      RollDice
    </button>
    <input
      type="text"
      name="msgInputBox"
      [(ngModel)]="TextMessage"
      required
      #box (keyup.enter)="enterSubmit()"
      placeholder="Message" >
    <button
      type="submit"
      class="btn btn-success"
      [disabled]="!msgBoxForm.form.valid">
      Submit
    </button>
  </form>
</div>

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?

Answer 1

Any button's or enter press' default behavior inside of a form will be to submit the form. To prevent this you could do the following:

<div>
  <form (ngSubmit)="msgBoxForm.form.valid && mySubmit()" #msgBoxForm="ngForm">
    <button mat-raised-button color="accent" (click)="rollDice($event)">
      RollDice
    </button>
    <input
      type="text"
      name="msgInputBox"
      [(ngModel)]="TextMessage"
      required
      #box (keyup.enter)="enterSubmit($event)"
      placeholder="Message" >
    <button
      type="submit"
      class="btn btn-success"
      [disabled]="!msgBoxForm.form.valid">
      Submit
    </button>
  </form>
</div>

and in your typescript:

rollDice(event: Event) {
  event.preventDefault();
  //rest of your code
}

enterSubmit(event: Event) {
  event.preventDefault();
  //rest of your code
}

This is allow you to only submit the form by clicking your submit button.

EDIT: I've added how you can check for form validity as well before submitting the form. Solution is from here: source