在 ngForm 中，每次单击操作按钮都会导致提交表单

Question

我有一个 ngForm，它有多个按钮，除了用于提交表单的按钮外，其他每个按钮都有不同的操作，例如，简单地更改用于 *ngIf 条件检查的状态。但是，每次我单击“创建”或“上传”按钮时，实际上又提交了一个表单，因此在数据库中创建了一条新记录。

我尝试按照此处的其他一些答案将 click 更改为 onClick，但问题仍然存在。请参考以下代码帮助我。

<form #adsForm="ngForm" (submit)="onSubmit()">
    <table  class="table createAds text-center">
      <thead>
      ......
      </thead>
      <tbody>
        <tr class="border_bottom">
          <td class="align-middle"><span style="color: red;">inactive</span></td>
          ......
          <td class="align-middle" *ngIf="!paying && !created">
            <button [disabled]="months === undefined" 
              class="btn btn-outline-primary" type="submit">Create
            </button>
          </td> 
          <td class="align-middle" *ngIf="created">
            <button [disabled]="imageCount == 0" class="btn btn-outline-primary" (click)="confirmToPay()">Pay
            </button>
          </td>          
          <td class="align-middle" *ngIf="!paying && !created">
            <button class="btn btn-outline-primary" (click)="onCancel()">Cancel</button>
          </td> 
          <td class="align-middle" *ngIf="created">
            <button class="btn btn-outline-primary" (click)="onUpload()">Upload</button>
          </td>          
        </tr>
      </tbody>
    </table>
  </form>

onSubmit() {   
    let data = new AdsToCreate();
   ......   

    this.memberService.createAds(data).subscribe(resp => {
      this.getUserAds();  
      this.created = true; 
    }, error => {
      console.log(error);
    });  
  }
  
 confirmToPay() {
    this.confirming = true;    
  }
  
 onCancel() {
    this.requesting = true;
    this.paying = false;
    this.checking = false;
    this.created = false;    
  }
  
 onUpload() {
    this.uploading = true;
  }

Answer 1

这很奇怪，请尝试删除 form 元素上的 (submit) 事件处理程序。

<form #adsForm="ngForm">

并从此按钮中删除 type="submit" 并向其添加 (click) 事件处理程序：

<button [disabled]="months === undefined" 
              class="btn btn-outline-primary" (click)="onSubmit()">Create
            </button>

或

您可以尝试将 type="button" 显式添加到所有其他按钮。

<form #adsForm="ngForm" (submit)="onSubmit()">
    <table  class="table createAds text-center">
      <thead>
      ......
      </thead>
      <tbody>
        <tr class="border_bottom">
          <td class="align-middle"><span style="color: red;">inactive</span></td>
          ......
          <td class="align-middle" *ngIf="!paying && !created">
            <button [disabled]="months === undefined" 
              class="btn btn-outline-primary" type="submit">Create
            </button>
          </td> 
          <td class="align-middle" *ngIf="created">
            <button type="button" [disabled]="imageCount == 0" class="btn btn-outline-primary" (click)="confirmToPay()">Pay
            </button>
          </td>          
          <td class="align-middle" *ngIf="!paying && !created">
            <button type="button" class="btn btn-outline-primary" (click)="onCancel()">Cancel</button>
          </td> 
          <td class="align-middle" *ngIf="created">
            <button type="button" class="btn btn-outline-primary" (click)="onUpload()">Upload</button>
          </td>          
        </tr>
      </tbody>
    </table>
  </form>

在 ngForm 中，每次单击操作按钮都会导致提交表单

In a ngForm every time clicking an action button causes submitting the form

angular

typescript

button

angular-directive

onsubmit