Label および Input

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

    Angular Label および Input の例

    使用方法

    Input および Label ディレクティブを初期化にするには、まず IgxInputGroupModule を app.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 リファレンス

    その他のリソース

    関連トピック:

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