Отправьте HTML-форму, как только подписка будет завершена, а значение будет скрыто в HTML Angular 6 - PullRequest
Новая
       33

Отправьте HTML-форму, как только подписка будет завершена, а значение будет скрыто в HTML Angular 6

0 голосов
/ 07 октября 2018

У меня есть простая HTML-форма, которая содержит только один текстовый ввод и кнопку.Эта форма предназначена для перенаправления на платежный шлюз.

Как только пользователь нажимает кнопку Перейти к оплате Я пытаюсь вызвать функцию в компоненте.Внутри функции я делаю угловой пост-запрос с использованием сервисной функции и подписываю объект с сервера.

Я пытаюсь привязать значение объекта к текстовому полю и инициировать отправку формы с помощью JavaScript, как только значение ослепнет,Ниже приведен мой код.

HTML 

<form ngNoForm ng id="txnForm" name="txnForm" action="Payment-Gateway-URL" method="POST">
<input type="text" name="message" value="{{trxnMessage}}">

<button type="button" (click)="formSubmit()">
<span style="padding-right: 15px;">Proceed to Payment</span> 
<i class="fa fa-arrow-right" aria-hidden="true"></i>
</button>

</form>

Компонент

trxnMessage: любой; 

formSubmit() {
       this.reviewApplicationService.proceedToPaymet().subscribe(
           res => {
               let response = res.body;
               this.trxnMessage = res['trxnMessage'];
               if (this.trxnMessage != '' && this.trxnMessage != null) {
                   console.log('trxnValue is: ' + res['trxnMessage']);
               } else {
                   console.log('No value is foound: ');
               }

           },
           error => console.log("Error: ", error),

           () => {
                   document.forms['txnForm'].submit();

           }
       );

   }

Сервис 

proceedToPaymet() {
       let headers = new HttpHeaders({ 'Content-Type': 'application/json;text/plain' });
       return this.http.post(this.urlProceedToPay, { headers: headers, observe: 'response' }).map((res: HttpResponse<any>) => {
           return res;
       });
   }

Но как только я нажимаю кнопку, форма начинает отправку (страница перезагружается), и я вижу значение, добавляющееся к вводу текста.Это означает, что форма отправляется без значения текстового поля.Итак, как правильно и как я могу внести изменения, чтобы справиться с этим сценарием?

...