如何使用Angular - 将表单数据发布到rest api

Question

如何将表单数据发布到外部 rest API？

目前我有一个 HTML 表单：

<ion-content padding>
  <ion-grid fixed>
    <ion-row justify-content-center align-items-center nowrap>
      <ion-col col-auto>
        <h2 text-capitalize>quick order</h2>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <form #formQuickOrder="ngForm">
          <ion-list>
            <ion-item *ngFor="let inputElem of templateData">
            <!-- <ng-container *ngFor="let inputElem of templateData"> -->
              <ion-label color="primary" floating>
                <ion-icon name="{{inputElem.icon}}"></ion-icon>
                <ion-note text-capitalize>{{inputElem.label}}</ion-note>
              </ion-label>

              <ion-input *ngIf="inputElem.name == 'name' else F" #input (ionBlur)="onInputBlur(input)" [type]="inputElem.type" name="inputElem.name" [(ngModel)]="inputElem.model" ngModel required minLength="3" maxLength="50"></ion-input>
              <ng-template #F><ion-input #input (ionBlur)="onInputBlur(input)" [type]="inputElem.type" name="inputElem.name" [(ngModel)]="inputElem.model" ngModel required></ion-input></ng-template>
              <!-- <span *ngIf="!input.ngControl.valid && isSentOrderClicked">{{input.getNativeElement().children[0].validationMessage}}</span> -->
            <!-- </ng-container> -->
            </ion-item>
          </ion-list> 
        </form>
      </ion-col>
    </ion-row>
  </ion-grid>
  <div class="btn-holder">
    <button (click)="onOrder()" class="btn-order-now" ion-button color="dark" outline round>order now</button>
  </div>
</ion-content>

然后我就有了在我的 component.ts 文件中处理提交的函数：

onOrder(formQuickOrder: NgForm) {
    console.log(formQuickOrder)

    //this.http.post('http://xxx/externalapi/add', formQuickOrder);
}

但是如何将表单数据发布到我的外部 API？用角度发送表单数据的标准是什么？它只是一个使用表单数据作为 queryParams 的简单发布请求，还是将其转换为 JSON 是标准的。我可以修改 API 以处理发送的任何数据，所以这不是问题。

Answer 1

您可以使用 angular HttpClient 并使用它的 POST 方法将数据发送到后台。

import { HttpClient } from '@angular/common/http';

constructor(private http: HttpClient) { }

pubic onOrder(formQuickOrder: NgForm): void {
    this.postData(pass your form value here);
}

priavte postData (formData: any): Observable<any> {
  return this.http.post<any>(this.yourUrl, formData);
}