Label および Input

    Ignite UI for Angular Input および Label ディレクティブを使用すると、単一行または複数行のテキスト要素を作成できます。フォーム入力の全般的なシナリオにおいて便利な機能です。

    Angular Label および Input の例

    使用方法

    Input および Label ディレクティブを初期化にするには、まず IgxInputGroupModuleapp.module.ts ファイルにインポートします。

    // app.module.ts
    
    ...
    import { IgxInputGroupModule } from 'igniteui-angular';
    // import { IgxInputGroupModule } from '@infragistics/igniteui-angular'; for licensed package
    
    @NgModule({
        ...
        imports: [..., IgxInputGroupModule],
        ...
    })
    export class AppModule {}
    

    Label および Input

    Label および Input ディレクティブのデフォルト スタイル設定はマテリアル デザイン ガイドライン のテキスト フィールド仕様を実装します。

    igxInput および igxLabel を使用するには、<igx-input-group> コンテナーにラップします。

    <igx-input-group>
        <input igxInput name="fullName" type="text" />
        <label igxLabel for="fullName">Full Name</label>
    </igx-input-group>
    

    igxInput ディレクティブは <input> および <textarea> 単一行および複数行テキスト フィールドの HTML 要素に適用できます。

    検証

    required 属性を使用して input を検証できます。ラベルの隣にアスタリスクが追加され、このフィールドは必須入力であることを示します。入力は検証が成功/失敗したかどうかによって緑/赤に変わります。

    <igx-input-group>
        <input igxInput name="fullName" type="text" required="required" />
        <label igxLabel for="fullName">Full Name</label>
    </igx-input-group>
    

    データ バインディング

    Ignite UI for Angular Input ディレクティブは、一方向および双方向のデータ バインディングをサポートします。以下のコードは NgModel を使用して双方向のデータ バインディングを追加する方法を示します。

    public user = {
        fullName: ""
    };
    
    

    マークアップのコード:

    <igx-input-group>
        <input igxInput name="fullName" type="text" [(ngModel)]="user.fullName" required="required" />
        <label igxLabel for="fullName">Full Name</label>
    </igx-input-group>
    

    フォーカスとテキストの選択

    igxFocus ディレクティブを使用して、input 要素に focus を強制するロジックを追加できます。

    <igx-input-group>
        <input igxInput [igxFocus]="isFocused" name="fullName" type="text" />
        <label igxLabel for="fullName">Full Name</label>
    </igx-input-group>
    
    Note

    igxFocus ディレクティブを使用するには、IgxFocusModule をインポートする必要があります。

    igxInput でマークされた input 要素内のテキストをフォーカス際に選択したい場合、igxTextSelection ディレクティブを有効にする必要があります。

    <igx-input-group>
        <input igxInput [igxTextSelection]="true" [igxFocus]="isFocused" name="fullName" type="text" />
        <label igxLabel for="fullName">Full Name</label>
    </igx-input-group>
    
    <igx-input-group>
        <input igxInput [igxTextSelection]="true" name="email" type="text" />
        <label igxLabel for="email">Email</label>
    </igx-input-group>
    
    Note

    igxTextSelection ディレクティブを使用するには、IgxTextSelectionModule をインポートする必要があります。

    Input Group

    Ignite UI for Angular Input Group コンポーネントは、開発者が使いやすく美しフォームを作成するのに役立ちます。詳細については、別のトピックこちら を参照してください。

    API リファレンス

    その他のリソース

    関連トピック:

    コミュニティに参加して新しいアイデアをご提案ください。