Question

我正在创建一个简单的Angular应用程序，我试图使用反应形式我只有一个小问题，当我单击一个按钮而不是提交表单时，应该做其他事情。提交表单的方法称为。

表单按钮

  <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（）”或按钮类型作为“ submit”。

角反应形式重复提交

2 个答案: