Angular 2/4:如何在第一个Ajax提交的回调中通过组件发布HTML表单(非Ajax)? [英] Angular 2 / 4 : How to POST HTML form (Not ajax) thru component on callback of 1st ajax submit?

问题描述

我想通过旧的方式(非Ajax)过帐输入字段来将表单提交到外部站点，它也提交了，但是Angular在跳转到外部页面之前在控制台中给了我错误.

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.

我在HTML(模板)中使用了以下代码

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

在组件中

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);
        });
    }
}

现在，此表单首先通过常规的响应表单post(ajax)将数据保存在我的网站中.现在，在那之后，我以旧的提交表单的方式将Paypal整个表单发布到了第三方，但是我得到了

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

感谢您的帮助. @HB谢谢

Any help is appreciated. @H.B. Thanks

推荐答案

您可能应该使用onSubmit($event)，然后根据您的自定义逻辑取消该事件.您可以通过event.target访问该表单.在角绑定中传递this可能不起作用，我可能会弄错.

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.

这篇关于Angular 2/4:如何在第一个Ajax提交的回调中通过组件发布HTML表单(非Ajax)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！