Question

我正在困扰着另一个错误，因为我注意到我正在使用onSubmitClicked()函数的两个按钮上的调用形式：

最初看起来像这样：

<button mat-raised-button (click)="onBackClicked()">
  Back
</button>
<button mat-raised-button type="submit">
  Submit
</button>

无论我单击哪个按钮，都将呼叫onSubmitClicked()。只需先通过“后退”按钮调用onBackClicked()。从“提交”按钮中删除type="submit"不会改变任何内容。

<form [formGroup]="placeInfoForm" (ngSubmit)="onSubmitClicked()">

  <div>
    <mat-form-field style="width: 100%;">
      <input matInput placeholder="Name" formControlName="name"/>
    </mat-form-field>
  </div>

  <div fxLayout="row" fxLayoutAlign="center">
    <button mat-raised-button (click)="onBackClicked()">
      Back
    </button>
    <button mat-raised-button>
      Submit
    </button>
  </div>

</form>

提交功能：

onBackClicked() {
  console.log('onBackClicked()')
}

onSubmitClicked() {
  console.log('onSubmitClicked()');
}

Answer 1

除非明确指定，否则<button>中的任何<form>都将尝试提交表单。

尝试一下：

<button mat-raised-button type="button" (click)="onBackClicked()">
  Back
</button>

提交表单不符合预期

1 个答案: