如何使用 Angular 12+ 版本提交表单

Question

我正在开发一个应用程序，我想使用 Angular 提交表单。流程的范围是当用户提交表单时，它将调用我添加到表单中的 urlRouter Uri。但我无法这样做，我必须提交表单，但它没有调用 Uri。问题是，当我将表单添加到任何简单的 HTML 标签时，它对我有用，但在角度上我无法使其工作。我还尝试过表单数据，因为 URL 只接受表单数据。下面是我的代码。

<form action="https://tpeweb.paybox.com/cgi/RemoteMPI.cgi" method="post">
    <input name="IdMerchant" value="38023277" type="hidden" />
    <input id="iIdSession" name="IdSession" value="678a7e5a54794e5bb0b5beb72489803f" type="hidden" />
    <input name="Amount" value="20" type="text" />
    <input name="Currency" value="978" type="hidden" />
    <input name="CCNumber" value="5425233430109903" type="hidden" />
    <input name="CCExpDate" value="0426" type="hidden" />
    <input name="CVVCode" value="123" type="hidden" />
    <!-- 3DSv2 -->
    <input name="EmailPorteur" value="[email protected]" type="hidden" />
    <input name="FirstName" value="Thomas" type="hidden" />
    <input name="LastName" value="ABLANCOURT" type="hidden" />
    <input name="Address1" value="1 rue de ici" type="hidden" />
    <input name="City" value="Saint Denis" type="hidden" />
    <input name="CountryCode" value="FR" type="hidden" />
    <input name="TotalQuantity" value="1" type="hidden" />
    <input name="ChallengeIndicator" value="02" type="hidden" />
    <input name="URLRetour" value="https://localhost:8081/api/callback/Transaction/postResponse" type="hidden" />
    <input type="submit" value="Continuer le paiement avec 3DS" />
    <hr />
  </form>

TS

submitForm(): void {
    const formElement = document.getElementById('paymentForm') as HTMLFormElement;
    formElement.submit();
  }

Answer 1

以下是如何在 Angular 中处理表单提交：

1. 首先，确保您已在 Angular 模块中导入 FormsModule 以使用 Angular 的表单功能。
2. 在组件 HTML 文件中，使用 Angular 的表单指令来绑定表单元素：

<form #paymentForm="ngForm" (ngSubmit)="submitForm()">
  <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" />
  <!-- 3DSv2 -->
  <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" />

  <input type="submit" value="Continuer le paiement avec 3DS" />
  <hr />
</form>

3.在组件TypeScript文件中，定义submitForm()方法来处理表单提交：

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  paymentFormValues: any = {
    IdMerchant: '38023277',
    IdSession: '678a7e5a54794e5bb0b5beb72489803f',
    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://localhost:8081/api/callback/Transaction/postResponse'
  };
  constructor(private http: HttpClient) { }

  submitForm(): void {
    // You can access form values using this.paymentFormValues
    console.log(this.paymentFormValues);
      this.http.post('https://tpeweb.paybox.com/cgi/RemoteMPI.cgi', this.paymentFormValues)
        .subscribe(
          (response) => {
            console.log('API Response:', response);
            // Handle API response as needed
          },
          (error) => {
            console.error('API Error:', error);
            // Handle errors
          }
        );
    // Call your URLRouter URI here or perform any other actions
    // Example: window.location.href = 'your-url';
  }
}

通过使用 Angular 的表单处理，您可以轻松访问表单值并在组件代码中提交后执行操作。确保将“your-url”替换为您想要在提交表单时调用的相应 URLRouter URI。