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

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.

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.