Ionicでformの外側にあるion-buttonでsubmitする方法

今まで、Formをsubmitするためのion-buttonはform内に置く必要がありました。こんな感じですね。

<form #f="ngForm">
  <ion-button type='submit' [disabled]="!f.form.valid">フォーム送信</ion-button>
</form>

なのですが、モバイルデザインの現実問題として、headerにbuttonを置き、Formをcontentに置くことは多々あります。そういった場合、今まではclickイベントでフォーム送信を行っていました。

<ion-header>
    <ion-buttons slot="end">
      <ion-button (click)="submit()" [disabled]="!f.form.valid">
        フォーム送信
      </ion-button>
    </ion-buttons>
</ion-header>
<ion-content>
    <form #f="ngForm">
      // 様々なInput要素
    </form>
</ion-content>

AngularのForm APIを使ってdisabledを機能させてるとはいえ、FormイベントをClickで代用するのは違和感ありますよね。

しかし、Ionic v6.3からFormの外側にあるbuttonでsubmitイベントを実行できるようになりました！🎉利用方法はFormにidを設定して、ion-button にform属性でそのidを指定するだけ。

<form id="exampleForm">
  <!-- Form controls -->
</form>
<ion-button type="submit" form="exampleForm">Submit</ion-button>

ちなみにバイブ処理的には、Formを見つけて、そのForm内にJavaScriptでbuttonを作成して、submitしたあとで、そのbuttonをremoveしてるようですね。

これによってより気持ちよくコーディングできるようになりますね！！

それではまた。