Блог

Я новичок в Angular и разрабатываю приложение. У меня есть форма, в которой данные должны быть добавлены в БД. Но, похоже, что-то не так, когда интерфейс пытается отправить данные формы с помощью метода services.

 <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>

  

Методы файла TS:

  // Form Data validation handler
  formData(): any{
    return this.validateForm.value;
  }

  addBids(): any {
    // tslint:disable-next-line:forin
    // const bidId = this.formData().bidId;
    const amount = this.formData().amount;
    const description = this.formData().description;
    const requisitionId = null;
    const supplierId = this.formData().supplierId;

    this.backendService.addBid(amount, description, requisitionId, supplierId)
      .subscribe(data => {
        this.bidData = data;
        console.log(data);
      });
  }
  

Для справки это сервис:

   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()

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

В то время как кнопка привязана к addBids()

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

Я рекомендую вам выбрать один из них, а не оба.