javascript - Angular 表单 - 如何在表单无效时禁用 onSubmit 事件？

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>

现在当输入框为空时，虽然提交按钮将被禁用，但按回车键将同时调用 enterSubmit() 和 mySubmit() 方法。即使单击没有“提交”类型的 RollDice 按钮，也会调用 mySubmit()。如何仅在单击提交按钮时调用 mySubmit()？

Answer 1

表单内的任何按钮或 enter press 的默认行为都是提交表单。为防止这种情况，您可以执行以下操作:

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

在你的 typescript 中:

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

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

这允许您仅通过单击提交按钮来提交表单。

编辑:我添加了如何在提交表单之前检查表单有效性。解决方案来自这里:source