Angular 5 simple form with Action is not working

Question

The code given below is not working in my angular html file but if i use this code individually in an html file it works i don't know what i am doing wrong this is just a simple form .

<form action='https://easypaystg.easypaisa.com.pk/easypay/Index.jsf' method='post'>
    <input  name='storeId' value='4950'>
    <input  name='amount' value='1000'>
    <input  name='postBackURL' value='https://easypaystg.easypaisa.com.pk/easypay/Confirm.jsf'>
    <input  name='orderRefNum' value='123113'>
    <input  name='merchantHashedReq' value='6ohsP8x3PpiaI4oNirWGwjVkyMLP4CbzcH6pZwvu9SViOzx9nLxyR/TtJhwFrxBU686Wf1z22G+TBxuo5QkSscuXp266qQWx8AbGWnLXxG79LHt+5VlD+lH2JkjKO997adwVHH6mGNm8ldtAKkRyf/E92QF5PwhWMjq8i4dlbABIjJxnwPS3x13R/Nbfmlugkz7XpX20DmZ0IhPuGBR95sOpDATIjfW51fuStCVVni4='>
    <input  name='autoRedirect' value='0'>
    <input  name='paymentMethod' value='CC_PAYMENT_METHOD'>
    <input  name='emailAddr' value='johndoe@live.com'>
    <input  name='mobileNum' value='0123455500'>
    <button type="submit" class="btn btn-success" >Submit</button>
    <input type='submit' value='asdasd' class="btn">
</form>

Does this answer your question? [Angular 5 default form submit](https://stackoverflow.com/questions/49263028/angular-5-default-form-submit) — PowerKiKi, Aug 05 '20 at 09:07
Does this answer your question? [Can't submit HTML form inside Angular 2 application](https://stackoverflow.com/questions/35129718/cant-submit-html-form-inside-angular-2-application) — Simon Ness, Nov 06 '20 at 13:15

score 35 · Accepted Answer · answered May 15 '18 at 11:30

35

You can do it in following way:

<form #form action='https://easypaystg.easypaisa.com.pk/easypay/Index.jsf' method='post'>
    ...
    <button type="submit" class="btn btn-success" (click)="form.submit()">Submit</button>
    ...
</form>

answered May 15 '18 at 11:30

Anshuman Jaiswal

5,352
1
29
46

1

@HaroonAslam Great, You can accept answer in that case :) – Anshuman Jaiswal May 15 '18 at 11:32
i will do it in 8 minutes – Haroon Aslam May 15 '18 at 11:33
form is getting submitted but without values – Dhiresh Budhiraja Jan 24 '19 at 18:26
@DhireshBudhiraja make sure your inputs are having `name` attribute. You can share stackblitz, I'll check. – Anshuman Jaiswal Jan 24 '19 at 22:36
This does not work in Angular 10 and will produce JavaScript error in the console. – PowerKiKi Aug 05 '20 at 09:05

score 7 · Answer 2 · answered Aug 05 '20 at 09:02

Use the ngNoForm attribute as documented. This will prevent all "magic" Angular behavior, and you will be able to submit the form in the native way (with page reload).

So something similar to:

<form ngNoForm action='https://easypaystg.easypaisa.com.pk/easypay/Index.jsf' method='post'>
    <input  name='storeId' value='4950'>
    ...
    <input type='submit' value='asdasd' class="btn">
</form>

Javier Aviles · Answer 3 · 2018-05-15T11:58:39.467

4

Posting a form directly causes a page reload, that's usually not what you want in an Angular application (SPA). Grab the data from the form and send an HTTP request from your code to the server instead.

You should leverage the NgSubmit directive, as described here

edited May 15 '18 at 11:58

answered May 15 '18 at 11:47

Javier Aviles

7,952
2
22
28

2

Yeah but there can be scenarios where you don't want a CORS error – Dhiresh Budhiraja Jan 24 '19 at 18:20

Angular 5 simple form with Action is not working

3 Answers3