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

In ponent

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

Form submission canceled because the form is not connected

Any help is appreciated. @H.B. Thanks

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./cgi-bin/webscr" >

In ponent

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

Form submission canceled because the form is not connected

Any help is appreciated. @H.B. Thanks

• javascript
• angular
• angular2-forms
• angular4-forms

• Possible to get a minimal git repo? – Tarun Lalwani Commented Apr 25, 2018 at 4:18
• @TarunLalwani sorry but its private repo. But you got your ponent ts, and html view. – Pratik Joshi Commented Apr 25, 2018 at 8: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 Commented Apr 25, 2018 at 8: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 Commented Apr 30, 2018 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 Commented May 1, 2018 at 20:39

2 Answers 2

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.

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