Angular 5 submitting form programmatically don't send correct values

Question

In my angular 5 application I need to submit a hidden form programmatically after an Http GET call, but when the form is submitted the three variables I am sending seems empty (but they don't).

In my component I have :

@ViewChild('testForm') testFormEl: any;


this.ticketService.postTicketWithCreditPayment(param)
    .subscribe(res => {
        this.paymentUrl = res.url;
        this.paymentXml = res.xml;
        this.paymentHash = res.hash;

        console.log(this.paymentUrl) <-- this log make me see the correct paymentUrl 

        this.testFormEl.nativeElement.submit();
     })
    }

And in my html I have the form with 3 hidden fields

<form #testForm name="form1" action="https://...url..." method="post">
    <input type="hidden" name="url" [value]="paymentUrl">
    <input type="hidden" name="xml" [(ngModel)]="paymentXml">
    <input type="hidden" name="hash" [(ngModel)]="paymentHash">
</form>

I try binding with [value] and [(ngModel)] but the form submitted is always this:

Is probably related to : stackoverflow

(I didn't down vote) I think you shoud use reactive form provided with angular. You can find a simple tutorial here : coursetro.com/posts/code/66/Angular-4-Reactive-Forms-Tutorial — ibenjelloun
– ibenjelloun, Commented Mar 8, 2018 at 9:28
i think the values populated inside ngModel only as response of user changes event, so if object was initially empty you need to care about set its values somehow — happyZZR1400
– happyZZR1400, Commented Mar 8, 2018 at 9:36
How can I submit the reactive form in the component? @ibenjelloun — Alessandro Celeghin
– Alessandro Celeghin, Commented Mar 8, 2018 at 9:44
1- Create your form using FromBuilder. 2- Link it to the template. 3- When click on submit use HttpClient's appropriate http function to send form.values to the backend. — ibenjelloun
– ibenjelloun, Commented Mar 8, 2018 at 9:50

Andriy · Accepted Answer · 2018-03-08 21:39:20Z

6

try to rewrite your HTML to:

<form #testForm name="form1" action="https://...url..." method="post">
  <input type="hidden" name="url" [ngModel]="paymentUrl">
  <input type="hidden" name="xml" [ngModel]="paymentXml">
  <input type="hidden" name="hash" [ngModel]="paymentHash">
</form>

[value] instead of [ngModel] will also work here: one way binding from the controller.

in your TS file:

// get reference to the form
@ViewChild('testForm') testFormEl;
...

in your subscribe method, wrap form submit with setTimeout(), so submit will be moved to the next tick:

setTimeout(_ => this.testFormEl.nativeElement.submit());

It should work now.

I created a stackblitz (https://angular-f7lg76.stackblitz.io), in which I removed method and action attributes from the form element, so it executes GET to its self, and you can see sent data in the URL address bar.

Stackblitz source: https://stackblitz.com/edit/angular-f7lg76?file=app%2Fapp.component.ts

edited Mar 8, 2018 at 21:39

answered Mar 8, 2018 at 13:55

Andriy

15.5k4 gold badges49 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

faizan baig Over a year ago

Properly explained and the setTimeout is the best solution

Andriy Over a year ago

@NileshSutar. I am glad that it saved your time :)

Collectives™ on Stack Overflow

Angular 5 submitting form programmatically don't send correct values

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related