Angular: Handling Forms to POST Add data to backend

Question

I'm a novice in Angular and I'm developing an app. I have a form where the data must be added to the DB. But there seems to be something wrong with when the frontend tries to send the form data using the services method.

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

The TS file methods:

 // 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);
      });
  }

For reference this is the service:

  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));
  }

Appreciate any insight on this issue thanks!

What exactly isn't working? Any error, which the console prints? Please elaborate — Marek W
– Marek W, Commented Oct 17, 2020 at 8:07

HaiTH · Accepted Answer · 2020-10-17 08:42:30Z

2

The form in your view is handled by the function named submitForm()

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

Whilst the button is bound to addBids()

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

I recommend you to choose one of those, not both.

answered Oct 17, 2020 at 8:42

HaiTH

1,14111 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mike Hanson Over a year ago

I agree. I would move the addBids logic to the submitForm function and make the button a submit button

Collectives™ on Stack Overflow

Angular: Handling Forms to POST Add data to backend

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related