7

I want to submit form to external site by POSTing the input fields in old school way(non Ajax) , it submits too but Angular giving me error in console before jumping to external page.

I used following code in HTML(template)

<form (submit)="onSubmit($event)" method="POST"  [formGroup]="form" *ngIf='form' action="https://www.sandbox.paypal.com/cgi-bin/webscr" >

In component

onSubmit(obj: any) {

    if (!this.form.valid) {
        this.helper.makeFieldsDirtyAndTouched(this.form);
    } else {
        this.loader = true;
        // save data in online_payment_ipn
        this.paymentService.saveOnlinePaymentIpn({}, 'paypal')
        .subscribe(response => {
            obj.target.submit();
        }, (err: any) => {
            this.loader = false;
            this.helper.redirectToErrorPage(err.status);
        });
    }
}

Now first this form saves data in my site via normal reactive form post(ajax). Now after that I post to 3rd party like paypal whole form in Old way of submitting form but I am getting enter image description here

Form submission canceled because the form is not connected

Any help is appreciated. @H.B. Thanks

Pratik Joshi
  • 11,485
  • 7
  • 41
  • 73
  • Possible to get a minimal git repo? – Tarun Lalwani Apr 25 '18 at 04:18
  • @TarunLalwani sorry but its private repo. But you got your component ts, and html view. – Pratik Joshi Apr 25 '18 at 08:51
  • I am not a angular dev, but I know JS well, That is why I need a minimal repo to provide a solution. A angular dev might be able to do that without the need of the same. But I have seen you have high chance of getting such things resolved when you provided a minimal git repo for people to try the issue – Tarun Lalwani Apr 25 '18 at 08:56
  • I think you should remove your submit, and make the request using the http request from a separate service. Add a button with a click handler that gets the form data, calls the service and passes the data to it. This same function can make the call to your address on the action tag. Remove (submit) and action from your form. – Farasi78 Apr 30 '18 at 13:56
  • Is the form still on the page by the time saveOnlinePaymentIpn calls back? - It's not being destroyed by an *ngIf anywhere above in the template? – Sam May 01 '18 at 20:39

2 Answers2

10

You probably should use onSubmit($event) and then cancel the event to your custom logic. You can access the form via event.target. Passing in this in an angular binding probably just does not work, i might be mistaken.

H.B.
  • 166,899
  • 29
  • 327
  • 400
  • 1
    That's right, there is no `this` in the context of that (submit) binding. Should be $event, if you want to catch the event target. – funkizer Mar 23 '18 at 10:01
  • I update the question. But I get whole form in obj.target. And how do I submit form in Non ajax(old) way to 3rd party site like paypal? – Pratik Joshi Mar 23 '18 at 10:07
  • @PratikCJoshi: Forms submit to any URL you specify as the `action` property. If you need to set that dynamically you can do so before calling `event.target.submit()`. – H.B. Mar 23 '18 at 10:10
  • 1
    If it can help, take a look to my response in https://stackoverflow.com/questions/49307817/what-would-be-the-best-way-to-create-a-form-onthe-fly-in-angular-x-2-4-5-and-s/49321103#49321103 – Eliseo Mar 23 '18 at 11:02
  • @H.B. I have created another question too https://stackoverflow.com/questions/50006053/angular-2-4-how-to-post-html-form-not-ajax-thru-component-after-sending-1s – Pratik Joshi Apr 24 '18 at 15:53
1

use addEventListener("click", foo) on the submit button and call e.preventDefault() as the first line of function foo(); insert custom logic from there.

cryophoenix
  • 171
  • 10