Angular 角度：处理表单以将数据添加到后端

我是Angular的新手，我正在开发一个应用程序。我有一个表单，其中的数据必须添加到数据库中。但是，当前端尝试使用服务方法发送表单数据时，似乎出现了一些问题

<h2>Add Bids</h2>
<div>
  <form nz-form [formGroup]="validateForm" class="add-bid-form" (ngSubmit)="submitForm()">

    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="amount" nzRequired>Transportation cost</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <input nz-input type="text" id="amount" formControlName="amount"  />
      </nz-form-control>
    </nz-form-item>

// other input fields in the same format as above

    <div nz-row nzJustify="center">
      <div nz-col nzFlex="3">
        <nz-form-control [nzSpan]="14" [nzOffset]="6">
          <button nz-button nzType="primary"
                  (click)="addBids()"
          >Add Payment</button>
        </nz-form-control>
      </div>
      <div nz-col nzFlex="2">
        <button nz-button nzType="default" routerLink="/dashboard">
          Go To Dashboard
        </button>
      </div>
    </div>

  </form>
</div>

本服务仅供参考：

  addBid(amount, description, requisitionId, supplierId): any {
    const headers = new HttpHeaders({
      'Content-Type': 'application/json'
    });
    return this.http
      .post(this.uri + '/bid/add', { amount, description, requisitionId, supplierId }, {headers})
      .pipe(catchError(this.errorHandler));
  }

---

感谢您对这个问题的任何见解，谢谢

视图中的表单由名为submitForm（）的函数处理

当按钮绑定到addBids（）时

---

到底是什么不起作用？控制台打印的任何错误？请让我同意。我会将addBids逻辑移到submitForm函数中，并使该按钮成为submit按钮
  addBid(amount, description, requisitionId, supplierId): any {
    const headers = new HttpHeaders({
      'Content-Type': 'application/json'
    });
    return this.http
      .post(this.uri + '/bid/add', { amount, description, requisitionId, supplierId }, {headers})
      .pipe(catchError(this.errorHandler));
  }


<form nz-form [formGroup]="validateForm" class="add-bid-form" (ngSubmit)="submitForm()">

<button nz-button nzType="primary"
                  (click)="addBids()"