feat: Add form property to IonButton to submit from outside form

[TamoMaez]

Bug Report

Ionic version:
4.x

Current behavior:
IonButton does not trigger submission of the form. You need this when your submit button is outside the form itself.

<form id="some-form">....</form>
<ion-button form="some-form">...</ion-button>

Expected behavior:
Should trigger the submit event of the form like so: https://www.w3schools.com/tags/att_button_form.asp

Steps to reproduce:

Add the code below:

<form id="some-form" (ngSubmit)="submit('Triggered')"></form>
<ion-button form="some-form">Trigger submit</ion-button>

Tap on the button and nothing will happen

Related code:

https://stackblitz.com/edit/ionic-v4-angular-tabs-qx5u9v?file=src%2Fapp%2Ftab1%2Ftab1.page.html

Workaround:
Hide native button element and trigger it by reference

...<form ... id="transaction-form">...</form>
...
<ion-footer>
    <ion-toolbar button (click)="submitBtn.click()">
        <ion-title>Some title</ion-title>
        <button hidden #submitBtn type="submit" form="transaction-form"></button>
    </ion-toolbar>
</ion-footer>

[indraraj26]

if you place ion-button with type submit inside form it should trigger automatically. let me know if this doesn't work for you

[liamdebeasi]

@indraraj26 Is correct. You need type="submit" on the ion-button otherwise it will not submit the form.

[TamoMaez]

@indraraj26 Is correct. You need type="submit" on the ion-button otherwise it will not submit the form.

Hi @liamdebeasi , adding type="submit" doesn't fix the problem https://stackblitz.com/edit/ionic-v4-angular-tabs-qx5u9v?file=src%2Fapp%2Ftab1%2Ftab1.page.html

When you are outside the form, adding the form attribute of the ion-button (which exists for this purpose) doesn't trigger submission. Please reopen, thx!

[indraraj26]

Hi @liamdebeasi ,

He is just assigned the id of form to button, Native button is triggering the ngSubmit but not ion-button which is wrapper around button.

what i see we do not have form props in ion-button.

<form id="some-form" (ngSubmit)="submit()"></form>
    <ion-button type="submit" form="some-form">Trigger form submit (doesn't work)</ion-button>
    <hr />
    <button type="submit" form="some-form">Trigger form submit (does work)</button>

If possible please re-open

[liamdebeasi]

Ok looks like this is only an issue when used outside the form as stated.

I am marking this as a feature request as ion-button does not support the form property. If anyone would like to make a PR for this feature, please let me know!

There are 2 things we need to do:

1. Add the form property to ion-button.
2. Update https://github.com/ionic-team/ionic/blob/master/core/src/components/button/button.tsx#L155 to select the form element if the form property is provided.

[ionitron-bot]

This issue has been labeled as help wanted. This label is added to issues that we believe would be good for contributors.

If you'd like to work on this issue, please comment here letting us know that you would like to submit a pull request for it. This helps us to keep track of the pull request and make sure there isn't duplicated effort.

For a guide on how to create a pull request and test this project locally to see your changes, see our contributing documentation.

Thank you!

[indraraj26]

Hi @liamdebeasi , I cloned ionic repo yesterday i had so many errors like cleancss not recognized etc that i resolved but now i dont know how to include ionic-angular to my locally project to test.

[TakumaKira]

Hi @indraraj26,

I think this will help.

[itsLucario]

Hi @liamdebeasi ,

I have created PR which addresses the feature request and enables form submission even outside the form with added form property.

[tanetrail]

Hi

Is this feature available in Ionic-React or when will it be available in ionic-react. not able to submit outside of the form. Thanks for all the help

[stewones]

this still an issue as of sep 2021

I'm having to fake a submit button inside the form as workaround

[darron1217]

Really simple thing.. any updates?

[sean-perkins]

Hello everyone 👋 we have had some great contributions in the past towards this PR. After reviewing the proposed changes, I want to outline a few requirements so that if anyone is still interested, they can submit a PR and it can be reviewed quickly.

The proposed introduction for this feature is the following property:

@Prop() form?: string | HTMLFormElement;

It should accept a string of the form owner's id. It will query the closest form with that id, if defined. Alternatively, it accepts a reference directly to the form element. This is useful for framework implementations that support working with refs.

Tests are a must for these changes. We need to validate with Playwright, that the form is submitted with both use cases (by form id and by reference).

Thanks!

[postnerd]

@sean-perkins I've created a PR yesterday (after I was facing a similar challenge with an app I am working on). I tried to follow your instructions and also added support for referencing a HTMLFormElement. But since this is my first PR for this project, I'm not quite sure if my solution fits your ideas.

Especially my implementation of the HTMLFormElement is maybe a little off, since I'm not even sure if the form prop can still be a HTMLFormElement at the time of runtime of the handleClick function.

If there is a larger implementation needed to support the HTMLFormElement referencing idea maybe we can split this feature request in two parts:

1. implement string support in ion-button for form prop
2. expand form prop support to HTMLFormElement references

If so I would reduce the scope of my PR and we can create a new issue for the second part. Since I'm pretty sure, that the string support would do the trick for 90% of the people (and we can stop using shadow buttons or other workarounds).

Please let me know if I should add/change something.

[sean-perkins]

This feature was completed in #25913 and will be available in Ionic 6.3.0 (upcoming release).

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.