Angular 2/4: Как отправить HTML-форму POST (не ajax) через компонент при обратном вызове 1-й отправки ajax?

Я хочу отправить форму на внешний сайт, отправив поля ввода в старом стиле (не Ajax), он тоже отправляется, но Angular выдает мне ошибку в консоли перед переходом на внешнюю страницу.

Я использовал следующий код в HTML (шаблон)

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

Теперь сначала эта форма сохраняет данные на моем сайте через обычную реактивную форму (ajax). Теперь, после этого, я отправляю третьей стороне, например, всю форму PayPal, используя старый способ отправки формы, но получаю < img src="https://i.stack.imgur.com/QDD7P.png" alt="введите здесь описание изображения">

Отправка формы отменена, так как форма не подключена

Любая помощь приветствуется. @Х.Б. Спасибо


javascript angular angular2-forms angular4-forms
person Pratik    schedule 23.03.2018    source источник
comment
Можно ли получить минимальный репозиторий git?   -  person Tarun Lalwani    schedule 25.04.2018
comment
@TarunLalwani извините, но это частное репо. Но у вас есть компонент ts и представление html.   -  person Pratik    schedule 25.04.2018
comment
Я не угловой разработчик, но я хорошо знаю JS, поэтому мне нужно минимальное репо, чтобы предоставить решение. Угловой разработчик мог бы сделать это без необходимости того же самого. Но я видел, что у вас есть высокие шансы решить такие проблемы, когда вы предоставили минимальный репозиторий git, чтобы люди могли попробовать решить проблему.   -  person Tarun Lalwani    schedule 25.04.2018
comment
Я думаю, вы должны удалить свою отправку и сделать запрос, используя http-запрос из отдельной службы. Добавьте кнопку с обработчиком кликов, который получает данные формы, вызывает сервис и передает ему данные. Эта же функция может сделать вызов на ваш адрес в теге действия. Удалить (отправить) и действие из формы.   -  person Farasi78    schedule 30.04.2018
comment
Остается ли форма на странице к моменту обратного вызова saveOnlinePaymentIpn? - Он не уничтожается *ngIf где-нибудь выше в шаблоне?   -  person Sam    schedule 01.05.2018

Ответы (2)


arrow_upward
10
arrow_downward

Вероятно, вам следует использовать onSubmit($event), а затем отменить событие в своей пользовательской логике. Вы можете получить доступ к форме через event.target. Передача this в угловой привязке, вероятно, просто не работает, я могу ошибаться.

person H.B.    schedule 23.03.2018
comment
Правильно, в контексте этой (отправить) привязки нет this. Должно быть $event, если вы хотите поймать цель события. - person funkizer; 23.03.2018
comment
обновляю вопрос. Но я получаю всю форму в obj.target. И как мне отправить форму без ajax (старого) способа на сторонний сайт, такой как PayPal? - person Pratik; 23.03.2018
comment
@PratikCJoshi: формы отправляются на любой URL-адрес, указанный вами в качестве свойства action. Если вам нужно установить это динамически, вы можете сделать это перед вызовом event.target.submit(). - person H.B.; 23.03.2018
comment
Если это может помочь, взгляните на мой ответ в stackoverflow. ком/вопросы/49307817/ - person Eliseo; 23.03.2018
comment
@Х.Б. Я также создал еще один вопрос stackoverflow.com/questions/50006053/ - person Pratik; 24.04.2018

arrow_upward
1
arrow_downward

используйте addEventListener("click", foo) на кнопке отправки и вызовите e.preventDefault() в качестве первой строки function foo(); вставьте пользовательскую логику оттуда.

person cryophoenix    schedule 01.05.2018