I am working on an application where I want to submit a form using angular. The scope of the flow is when the user submits a form then it will call the urlRouter Uri I have added to the form. But I am unable to do so I have to submit the form but it didn’t call the Uri. The problem is when I add a form to any simple HTML tags then it works for me but in angular I am unable to make it work. I have also tried form data as the URL accepts only form data. Below is my code.

<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();
  }