Angular 无功 forms 双提交

Question

我正在创建一个简单的 Angular 应用程序，我尝试使用反应式 forms 我只有一个小问题，当我单击一个除了提交表单之外应该做其他事情的按钮时。 提交表单的方法被调用。

表单按钮

  <nb-card-footer class="text-right">
    <button class="btn btn-sm btn-danger mr-4"
            (click)="closeDialog(editProductForm)">{{"Close" | translate}}</button>
    <button *ngIf="isSales()" class="btn btn-sm btn-warning mr-2" [disabled]="!editProductForm.valid"
            (click)="addSalesProduct($event)">{{"Add sales product" | translate}}</button>
    <button class="btn btn-sm btn-success" [disabled]="!editProductForm.valid"
            type="submit">{{"Edit" | translate}}</button>
  </nb-card-footer>

表格声明如下

<form class="col-12" *ngIf="product.id > 0" [formGroup]="editProductForm" (ngSubmit)="editProduct(editProductForm)">

我的方法如下

  addSalesProduct(data) {
     // Add sales
  }

  editProduct(data) {
     // Edit

  }

即使单击添加销售按钮，也会调用编辑产品方法。

我的代码可能有什么问题？

Answer 1

似乎问题在于，默认情况下，表单中的按钮被视为类型submit 。

我遇到了类似的问题，并通过将按钮类型明确指定为button来解决它。

请尝试以下代码段：

<button type="button" *ngIf="isSales()" class="btn btn-sm btn-warning mr-2" [disabled]="!editProductForm.valid"
            (click)="addSalesProduct($event)">{{"Add sales product" | translate}}</button>

它应该可以正常工作。

Answer 2

我会避免在同一个表单标签中同时使用表单提交和按钮类型。 您可以使用 submit="function()" 或按钮类型作为“提交”。