Angular 2 / 4 : How to POST HTML form (Not ajax) thru component on callback of 1st ajax submit?

Question

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

Form submission canceled because the form is not connected

Any help is appreciated. @H.B. Thanks

Phebe

Possible to get a minimal git repo? – Strongroom

@TarunLalwani sorry but its private repo. But you got your component ts, and html view. – Phebe

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

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. – Bowker

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? – Hopeh

Answer 1

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.

Telford

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. – Picket

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? – Phebe

@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(). – Telford

If it can help, take a look to my response in #49308317 – Lian

@H.B. I have created another question too #50006553 – Phebe

Answer 2

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

Cotopaxi