Web Components (フォーム) の概要
Web Components の Form コンポーネントは、アプリケーションの要件に適合するお問い合わせフォームや登録ページを設定するために使用されます。Web Components フォーム検証を簡単に提供し、フォームの向きを定義し、必要なレイアウトを構成またはカスタマイズすることもできます。Web Components フォーム コンポーネントは、ユーザー アクションに応答する機会を与えるイベントも公開します。
Web Components の例
次の例は、内部にいくつかの入力、ボタン、およびチェックボックスがある IgcFormComponent を表しています。
使用方法
まず、次のコマンドを実行して Ignite UI for Web Components をインストールする必要があります。
npm install igniteui-webcomponents
IgcFormComponent を使用する前に、次のように登録する必要があります:
import {defineComponents, IgcFormComponent, IgcInputComponent, IgcCheckboxComponent, IgcButtonComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
defineComponents(IgcFormComponent, IgcInputComponent, IgcCheckboxComponent, IgcButtonComponent);
IgcFormComponent の使用を開始する最も簡単な方法は次のとおりです:
フォーム データは、次のコンポーネントについて収集されます:
フォーム コントロールが無効な場合、フォームは送信されず、エラー メッセージが表示されます。フォームの送信時にフォーム要素を検証しないように指定する場合は、novalidate 属性を IgcFormComponent 要素に追加できます。
<igc-form novalidate>
<!-- Form content -->
</igc-form>
イベント
Form コンポーネントは、次のイベントを発生させます:
- Submit - フォームが送信されたときに発生します。
- Reset - フォームがリセットされたときに発生します。
Submit イベントのイベント リスナーを追加する方法を示す例を次に示します:
document.addEventListener('igcSubmit', function (event) {
const customEvent = event as CustomEvent<FormData>;
console.log(customEvent.detail);
});
メソッド
Form コンポーネントは、次のメソッドを公開します:
| メソッド | 説明 |
|---|---|
Submit |
フォーム データを送信します。 |
Reset |
フォーム データをリセットします。 |
GetFormData |
フォーム データを収集し、単一の FormData オブジェクトを返します。 |
reportValidity |
要素の子コントロールが検証制約を満たしているかどうかを返します。 |