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

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>

[itsLucario]

Hi @liamdebeasi ,

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

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