Unable to submit traditional form with action in Angular

Question

I'm integrating Adyen 3DSecure payments. I make a request to Adyen with the card details to get the URL of the bank, and then redirect to the bank with a HTTP POST request using a form. The form should be self-submitting. See the Adyen documentation here: https://docs.adyen.com/developers/risk-management/3d-secure#redirecttothecardissuer

At the top of my Angular 4 component I'm using ElementRef to get access to the form submit button:

@ViewChild('submitButton') submitButton: ElementRef;

I then make a request from my Angular 4 component:

  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 contains the details to be used in the form to do a POST to the bank e.g. the issuerUrl to be redirected to. My template is:

<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 line this.submitButton.nativeElement.click(); should do the submit and redirect to the issuerUrl. However nothing happens. Even when I actually click the submit button, again nothing happens (the form is populated correctly with the correct action etc).

It's as if a traditional form with an action and a submit button does not work in modern day Angular. Any ideas?

EDIT

After rendering, the HTML looks like this:

<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>

When I click this button, nothing happens. When I copy this to it's own separate HTML page, when I click, I get redirected to https://test.adyen.com/hpp/3d/validate.shtml as expected.....

Answer 1

Programatically submitting the form rather than clicking the button worked:

this.issuerForm.nativeElement.submit();