Угловая форма - Как отключить событие 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>

Теперь, когда поле ввода пусто, хотя кнопка отправки будет отключена, нажмите Enter, чтобы вызвать оба метода enterSubmit () и mySubmit ().Даже нажатие кнопки RollDice, которая не имеет типа «submit», также вызовет mySubmit ().Как я могу вызвать mySubmit () только после нажатия кнопки «Отправить»?

Answer 1

Поведение по умолчанию любой кнопки или нажатия кнопки внутри формы будет отправлять форму.Чтобы предотвратить это, вы можете сделать следующее:

<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>

и в своем машинописном тексте:

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

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

Это позволяет вам отправлять форму, только нажав кнопку отправки.

РЕДАКТИРОВАТЬ: я добавил, как вы можете проверить правильность формы, прежде чем отправлять форму.Решение здесь: источник