如何使用 Angular 17 捕获表单提交的响应

Question

我正在开发一个应用程序，流程是当我提交表单时，它会将响应发布到URLRetour，我需要在将我重定向到URLRetour之前捕获响应。或者我们如何捕获角度分量中的后响应？下面是代码

   <form id="paymentForm">
        <input name="IdMerchant" [(ngModel)]="paymentFormValues.IdMerchant" type="hidden" />
        <input name="IdSession" [(ngModel)]="paymentFormValues.IdSession" type="hidden" />
        <input name="Amount" [(ngModel)]="paymentFormValues.Amount" type="text" />
        <input name="Currency" [(ngModel)]="paymentFormValues.Currency" type="hidden" />
        <input name="CCNumber" [(ngModel)]="paymentFormValues.CCNumber" type="hidden" />
        <input name="CCExpDate" [(ngModel)]="paymentFormValues.CCExpDate" type="hidden" />
        <input name="CVVCode" [(ngModel)]="paymentFormValues.CVVCode" type="hidden" />
        <input name="EmailPorteur" [(ngModel)]="paymentFormValues.EmailPorteur" type="hidden" />
        <input name="FirstName" [(ngModel)]="paymentFormValues.FirstName" type="hidden" />
        <input name="LastName" [(ngModel)]="paymentFormValues.LastName" type="hidden" />
        <input name="Address1" [(ngModel)]="paymentFormValues.Address1" type="hidden" />
        <input name="City" [(ngModel)]="paymentFormValues.City" type="hidden" />
        <input name="CountryCode" [(ngModel)]="paymentFormValues.CountryCode" type="hidden" />
        <input name="TotalQuantity" [(ngModel)]="paymentFormValues.TotalQuantity" type="hidden" />
        <input name="ChallengeIndicator" [(ngModel)]="paymentFormValues.ChallengeIndicator" type="hidden" />
        <input name="URLRetour" [(ngModel)]="paymentFormValues.URLRetour" type="hidden" />
      
        <button (click)="submitForm()" value="">Continuer le paiement avec 3DS</button>
        <hr />
      </form>

Ts代码

  paymentFormValues: any = {
    IdMerchant: '38023277',
    IdSession: '097a4cc4-59e8-43a5-a767-c6865386ff5a',
    Amount: '20',
    Currency: '978',
    CCNumber: '5425233430109903',
    CCExpDate: '0426',
    CVVCode: '123',
    EmailPorteur: '[email protected]',
    FirstName: 'Thomas',
    LastName: 'ABLANCOURT',
    Address1: '1 rue de ici',
    City: 'Saint Denis',
    CountryCode: 'FR',
    TotalQuantity: '1',
    ChallengeIndicator: '02',
    URLRetour: 'https://gateway-dev.mvola.mg:443/selfcarepaymentapi/v1/api/callback/Transaction/postResponse'
  };

  submitForm() {
    const form = document.getElementById('paymentForm') as HTMLFormElement;
    form.action = 'https://preprod-tpeweb.paybox.com/cgi/RemoteMPI.cgi';
    form.method = 'POST';
    form.submit();
  }

Answer 1

为了捕获您的

POST

API 路由的响应，您需要订阅您的

http

调用。

我强烈建议你以这样的角度

service

这样做：

payment.service.ts

：

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

@Injectable({
  providedIn: 'root'
})
export class PaymentService{

  constructor(
    private httpClient: HttpClient,
  ) { }

  public submitPayment(paymentForm:any) : Observable<any> {
    return this.httpClient.post<any>('https://preprod-tpeweb.paybox.com/cgi/RemoteMPI.cgi',paymentForm);
  }
}

然后在您的组件中，您可以通过 Observable 订阅 API 调用：

payment-form.component.ts

：

export class PaymentFormComponent{
 constructor(private paymentService:PaymentService){}

 paymentFormValues: any = {
    IdMerchant: '38023277',
    IdSession: '097a4cc4-59e8-43a5-a767-c6865386ff5a',
    Amount: '20',
    Currency: '978',
    CCNumber: '5425233430109903',
    CCExpDate: '0426',
    CVVCode: '123',
    EmailPorteur: '[email protected]',
    FirstName: 'Thomas',
    LastName: 'ABLANCOURT',
    Address1: '1 rue de ici',
    City: 'Saint Denis',
    CountryCode: 'FR',
    TotalQuantity: '1',
    ChallengeIndicator: '02',
    URLRetour: 'https://gateway-dev.mvola.mg:443/selfcarepaymentapi/v1/api/callback/Transaction/postResponse'
  };

 submitForm() {
    this.paymentService.submitPayment(this.paymentFormValues).subscribe({
     next:(response) => {
       console.log(response)
       //your code logic to redirect to URLRetour
     }
   })
  }
}