Невозможно отправить традиционную форму с действием в Angular

Я интегрирую платежи Adyen 3DSecure. Я делаю запрос в Adyen с реквизитами карты, чтобы получить URL банка, а затем перенаправляю в банк с запросом HTTP POST, используя форму. Форма должна быть самостоятельной. См. Документацию Adyen здесь: https://docs.adyen.com/developers/risk-management/3d-secure.

В верхней части моего компонента 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 банку, например, на IssueUrl для перенаправления. Мой шаблон:

<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(); должен сделать отправку и перенаправить на эмитента Url. Однако ничего не происходит. Даже когда я действительно нажимаю кнопку отправки, снова ничего не происходит (форма заполнена правильно с правильным действием и т. Д.).

Как будто традиционная форма с действием и кнопкой отправки не работает в современном 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 как и ожидалось.....

Источник

1 ответ

Решение

Программная отправка формы вместо нажатия кнопки сработала:

this.issuerForm.nativeElement.submit();
Источник
Другие вопросы по тегам