formData
formData メソッドは、フォーム要素にバインドされたオブジェクトデータを生成するために使用され、フォーム要素の処理をより簡単かつ効率的にします。このメソッドは、ターゲット要素内のすべてのフォーム要素の値を含むオブジェクトを生成し、そのオブジェクトはフォーム要素の変更をリアルタイムに反映します。
以下の例では、formData メソッドを使用してフォーム要素にバインドされたオブジェクトデータを生成する方法を示します：
この例では、テキスト入力フィールド、ラジオボタン、テキストエリアを含むフォームを作成し、formDataメソッドを使用してオブジェクトdataを作成しました。このオブジェクトには、これらのフォーム要素の値が含まれています。また、watchメソッドを使用してデータの変化を監視し、データをページ上にリアルタイムで表示します。ユーザーがフォーム要素の値を変更すると、dataオブジェクトがそれに応じて更新され、データ処理が非常にシンプルかつ効率的になります。
双方向データバインディング
生成されたオブジェクトデータは同様に逆方向のバインド能力を持っており、これはオブジェクトのプロパティを変更すると、関連するフォーム要素の値も自動的に更新されることを意味します。これはフォームデータを処理する際に非常に便利で、双方向データバインディングを簡単に実装できます。
以下の例では、formData メソッドによって生成されたオブジェクトデータの使い方と、逆方向のデータバインディングの方法を示します：
この例では、まずテキスト入力欄、ラジオボタン、テキストエリアを含むフォームを作成し、formData メソッドを使用してデータオブジェクト data を生成しました。その後、data オブジェクトのプロパティを変更することで、逆方向のデータバインディング、つまりオブジェクトプロパティの変更に伴ってフォーム要素の値が自動的に更新されることを実現しました。この双方向データバインディング機能により、フォームデータとのやり取りがより便利になります。
特定のフォームをリッスンする
デフォルトでは、formData() メソッドはターゲット要素内のすべての input、select、textarea 要素を監視します。ただし、特定のフォーム要素のみを監視したい場合は、CSS セレクターを渡すことで実現できます。
以下の例では、CSSセレクタを渡して特定のフォーム要素をリッスンする方法を示します：
この例では、class が "use-it" であるフォーム要素だけを監視したいため、formData() メソッドに引数として ".use-it" を渡しています。これにより、そのクラス名を持つフォーム要素のみが監視され、生成されるデータオブジェクトに含まれます。これは、フォーム要素を選択的に監視し、フォームデータをより正確に管理するのに役立ちます。
カスタムフォーム
カスタムフォームコンポーネントの使用は非常に簡単で、カスタムコンポーネントに value 属性 を追加し、name 特性 を設定するだけです。
カスタムフォームコンポーネントを使用する際は、それをフォームに追加し、必要な name 属性を設定するだけです。上記の例では、<custom-input> 要素を追加し name 属性を設定することで、カスタムフォームコンポーネントを使用しています。その後、formData() メソッドを使って入力要素やカスタムコンポーネントの値を監視し、リアルタイムでフォームデータを取得・処理します。この方法により、特定のニーズに応じてカスタムフォームコンポーネントを含める形で、非常に簡単にフォームを拡張できます。
コンポーネントまたはページ内でフォームデータを使用する
時には、コンポーネントやページ内でフォームデータを使用する必要があり、attached ライフサイクルでデータを生成してコンポーネントにバインドする必要がある場合があります。
{{logtext}}
attached ライフサイクルにより、コンポーネントの準備が整った後、this.shadow.formData() メソッドを使用してフォームデータオブジェクト fdata を生成しました。
formData() は、インタラクションロジックが比較的シンプルなフォームシナリオにより適しています。