Angular submit does not populate hidden input before submission

Question

I'm creating a way to login using different providers from angular. I'm having an issue submitting my form, the loginProvider value is not being sent to the server. I have a form which looks like so:

<form #form method="post" class="form-horizontal" [action]="loginUrl">
    <div>
        <p>
        <button ion-button block (click)="loginFrom(form, 'StripeConnect')" title="Log in using Stripe">
            Stripe Connect
        </button>
        <button ion-button block (click)="loginFrom(form, 'google')" title="Log in using Google">
            Google
        </button>
            <input type="hidden" name="provider" [value]="loginProvider">
            <input type="text" name="entryCode" placeholder="Entry Code">
        </p>
    </div>
</form>

In my typescript file I have the following:

loginProvider: string
loginFrom(form, loginProvider) {
  this.loginProvider = loginProvider;
  setTimeout(() => form.submit(), 0);
}

Why don't you just add the needed data (provider) to the buttons and make them submit buttons? — Jakob Em
– Jakob Em, Commented Jun 21, 2020 at 16:22
Yes this should be possible: <button type="submit" name="loginProvider" value="google">Log in using Google</button> — Jakob Em
– Jakob Em, Commented Jun 21, 2020 at 16:55
But when using angular a regular form submission might not be the best decision as it causes the page to reload. A post call to the backend via the HttpClient should usually be enough to obtain a new session and log the user in. — Jakob Em
– Jakob Em, Commented Jun 21, 2020 at 16:57

Jakob Em · Accepted Answer · 2020-06-21 17:14:51Z

3

You can put the different values as form values to the submit buttons like this:

<form #form method="post" class="form-horizontal" [action]="loginUrl">
    <div>
        <p>
        <button ion-button block type="submit" name="loginProvider" value="StripeConnect" title="Log in using Stripe">
            Stripe Connect
        </button>
        <button ion-button block type="submit" name="loginProvider" value="google" title="Log in using Google">
            Google
        </button>
            <input type="text" name="entryCode" placeholder="Entry Code">
        </p>
    </div>
</form>

answered Jun 21, 2020 at 17:14

Jakob Em

1,0909 silver badges19 bronze badges

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

Collectives™ on Stack Overflow

Angular submit does not populate hidden input before submission

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related