无法提交带有 Angular 操作的传统表格

Question

我正在集成 Adyen 3DSecure 支付。我向 Adyen 请求了银行卡的详细信息以获取银行的 URL，然后使用表单通过 HTTP POST 请求重定向到银行。表格应该是自我提交的。请在此处查看 Adyen 文档：https://docs.adyen.com/developers/risk-management/3d-secure#redirecttothecardissuer

在我的 Angular 4 组件的顶部，我使用 ElementRef 访问表单提交按钮：

@ViewChild('submitButton') submitButton: ElementRef;

然后我从我的 Angular 4 组件发出请求：

  Observable.forkJoin([
    this.paymentForm.validate(),
    this.orderEmailForm.validate(),
  ])
  .catch((e) => {
    isValidationError = true;
    throw e;
  })
  .switchMap((result) => {
     ...
     ...
     this.apiService.startBuyGift(userId, aPayload)

  .do((paymentAuthorise:  PaymentAuthorise) => {

    this.paymentAuthorise = paymentAuthorise;

    setTimeout(() => { // need timeout, because HTML is not there yet
      console.log('submitButton is ', this.submitButton);
      this.submitButton.nativeElement.click();
    }, 1000);

  })
  .finally(() => {

  })

paymentAuthorise 包含表格中用于对银行进行 POST 的详细信息，例如要重定向到的 issuerUrl。我的模板是：

<div *ngIf="paymentAuthorise">
  <form method="POST" action="{{ paymentAuthorise.threeDSecure.issuerUrl }} "  >
      <input type="hidden" name="PaReq" value="{{ paymentAuthorise.threeDSecure.paRequest }}" />
      <input type="hidden" name="MD" value="{{ paymentAuthorise.threeDSecure.md }}" />
      <input type="hidden" name="TermUrl" value="{{ paymentAuthorise.threeDSecure.issuerUrl }}" />
      <input type="submit" class="button" value="continue" #submitButton />
  </form>
</div>

这一行 this.submitButton.nativeElement.click(); 应该提交并重定向到 issuerUrl。然而什么也没有发生。即使当我实际点击提交按钮时，也没有任何反应（表单已正确填充正确的操作等）。

好像带有操作和提交按钮的传统表单在现代无法使用 Angular。有什么想法吗？

编辑

渲染后，HTML 看起来像这样：

<form _ngcontent-c2="" method="POST" novalidate="" action="https://test.adyen.com/hpp/3d/validate.shtml " class="ng-untouched ng-pristine ng-valid">
      <input _ngcontent-c2="" name="PaReq" type="hidden" value="eNpVUttygjAQ/RXrB5AQrjJrZiLMWB9QbOlzh4lbZUZAA1Tt1zfBW5unPXv2ejaQ7xRi8o6yV8ghxbYttjgqN9NxFIaOxwLb9VwaUBpOxhwy8YZHDt+o2rKpuW1RiwG5Q52u5K6oOw6FPM4WS+7ZzHGB3BBUqBYJz7HtsqoS8tiXChWQqxvqokL+IT5F/BLFe9RV5+VXF69SIAMFsunrTl24E+imdwC92vNd1x3aiJDT6WTJIXWrUy3ZVEAMD+Q5WtYbq9X1zuWGr5LtzzJfOGm+tpeJcNJEuKu1MG8KxETApuiQM2qH1GPuiAYRdSIWABn8UFRmED6fZSPftia+3vbqgYNpJK7Atw3z1wNacYW1vPCQaeqBAM+HpkYdoZd82ECeY8evRl/Zac08ZgT2/CCc0LvUA2GqlFodPXQ4lDEAiEkltyOS27G19e8T/AIBp600">
      <input _ngcontent-c2="" name="MD" type="hidden" value="djIhOGZGVHMzNXVGMmNBYit4Vk1QWTVOQT09IXSU4cnFE9pTy1vmgpKOm7wF7CWsmu+z6CnBoBKAFMyo9Phpfuv9NljsAKOcpfrK98lwuFF0ZtOyg6pO366T0Hkb2hObYrn58Moq1hRoLtpZL+yBQE6I2ckKR9xErkyqqofXDJdhovfAe7lzDKzbu38jv7jzYKjh6pZGhSXUxMVr+iHJsLskllfIrghEOdkWYNe0FzmNsA43Cmceq0lQrCmlMBz9HnYP8WG5IETkEFk81qisvqqw7q7mIcSqRLcR1TBSn1ZKyaAajazFe0Hx7Y9yc67MeoSw6zNhq8UHqPOvDKytHmQlJaflk4FyhnkqH0OAtGJx">
      <input _ngcontent-c2="" name="TermUrl" type="hidden" value="https://test.adyen.com/hpp/3d/validate.shtml">
      <input _ngcontent-c2="" class="button" type="submit" value="continue" ng-reflect-class-base="button">
  </form>

当我点击这个按钮时，没有任何反应。当我将其复制到它自己的单独 HTML 页面时，当我单击时，我会按预期重定向到 https://test.adyen.com/hpp/3d/validate.shtml.....

Answer 1

以编程方式提交表单而不是单击按钮有效：

this.issuerForm.nativeElement.submit();

无法提交带有 Angular 操作的传统表格

Unable to submit traditional form with action in Angular

javascript

angular

angular4-forms