Web Components (フォーム) の概要

    Web Components の Form コンポーネントは、アプリケーションの要件に適合するお問い合わせフォームや登録ページを設定するために使用されます。Web Components フォーム検証を簡単に提供し、フォームの向きを定義し、必要なレイアウトを構成またはカスタマイズすることもできます。Web Components フォーム コンポーネントは、ユーザー アクションに応答する機会を与えるイベントも公開します。

    Web Components の例

    次の例は、内部にいくつかの入力、ボタン、およびチェックボックスがある IgcFormComponent を表しています。

    使用方法

    まず、次のコマンドを実行して Ignite UI for Web Components をインストールする必要があります。

    npm install igniteui-webcomponents
    
    import {defineComponents, IgcFormComponent, IgcInputComponent, IgcCheckboxComponent, IgcButtonComponent } from 'igniteui-webcomponents';
    
    defineComponents(IgcFormComponent, IgcInputComponent, IgcCheckboxComponent, IgcButtonComponent);
    

    IgcFormComponent の使用を開始する最も簡単な方法は次のとおりです:

    フォーム データは、次のコンポーネントについて収集されます:

    フォーム コントロールが無効な場合、フォームは送信されず、エラー メッセージが表示されます。フォームの送信時にフォーム要素を検証しないように指定する場合は、novalidate 属性を IgcFormComponent 要素に追加できます。

      <igc-form novalidate>
        <!-- Form content -->
      </igc-form>
    

    イベント

    Form コンポーネントは、次のイベントを発生させます:

    • igcSubmit - フォームが送信されたときに発生します。
    • igcSubmit - フォームがリセットされたときに発生します。

    Submit イベントのイベント リスナーを追加する方法を示す例を次に示します:

    document.addEventListener('igcSubmit', function (event) {
      const customEvent = event as CustomEvent<FormData>;
      console.log(customEvent.detail);
    });
    

    メソッド

    Form コンポーネントは、次のメソッドを公開します:

    メソッド 説明
    submit フォーム データを送信します。
    reset フォーム データをリセットします。
    getFormData フォーム データを収集し、単一の FormData オブジェクトを返します。
    reportValidity 要素の子コントロールが検証制約を満たしているかどうかを返します。

    API リファレンス

    フォームの API の詳細については、次のリンクを参照してください。

    使用したその他のコンポーネントとディレクティブ:

    その他のリソース