Ionic-framework: bug: ion-button form attribute doesn't trigger submit

[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 does 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[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.