Input Group

Ignite UI for Angular Input Group は、簡単に使用できるデータ入力フォームを作成できます。データ入力を簡素化し、入力コントロールには検証やエラーの処理機能も提供します。

Input Group デモ

使用方法

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

テンプレート駆動フォームを使用する前に Ignite UI コンポーネントのすべてのモジュールと FormsModule をインポートします。

// app.module.ts

...
import { IgxIconModule, IgxInputGroupModule, IgxButtonModule, IgxRippleModule, IgxDatePickerModule, IgxTimePickerModule, IgxComboModule } from "igniteui-angular";
import { FormsModule } from "@angular/forms";

@NgModule({
    ...
    imports: [..., IgxIconModule, IgxInputGroupModule, IgxButtonModule, IgxRippleModule, IgxDatePickerModule, IgxTimePickerModule, IgxComboModule, FormsModule],
    ...
})
export class AppModule {}
Note

igxInputigxLabeligx-prefixigx-suffix、または igx-hint ディレクティブを使用するには、<igx-input-group> コンテナーにラップする必要があります。

Label および Input

igxLabel および igxInput ディレクティブとその検証、データ バインディング、API については、このトピックを参照してください。

Prefix と Suffix

Ignite UI for Angular Prefix または Suffix を使用して入力のプレフィックスまたはサフィックスを追加できます。両方のディレクティブに HTML 要素、文字列、またはその他のコンポーネントを含むことができます。文字列 prefix (+359) および igx-icon suffix (<igx-icon>phone</igx-icon>) を持つ新しい入力フィールドを追加します。

<igx-input-group>
    <igx-prefix>+359</igx-prefix>
    <label igxLabel for="phone">Phone</label>
    <input igxInput name="phone" type="text" [(ngModel)]="user.phone" />
    <igx-suffix>
        <igx-icon>phone</igx-icon>
    </igx-suffix>
</igx-input-group>

結果は以下のようになります。

Hint

Ignite UI for Angular Hint は、入力の下に配置されるヘルパー テキストを提供します。ヒントは入力の開始または終了に配置できます。igx-hint の位置は position プロパティを使用して設定します。以下は phone 入力にヒントを追加します。

<igx-input-group>
    <igx-prefix>+359</igx-prefix>
    <label igxLabel for="phone">Phone</label>
    <input igxInput name="phone" type="text" [(ngModel)]="user.phone" />
    <igx-suffix>
        <igx-icon>phone</igx-icon>
    </igx-suffix>
    <igx-hint position="start">Ex.: +359 888 123 456</igx-hint>
</igx-input-group>

ヒントを追加した phone フィールドは以下のようになります。

スタイル設定

入力にスタイルを適用するには、igxInputGroup コンポーネントの type プロパティを使用します。現在 line (デフォルト)、box、border、および search のスタイル設定をサポートします。スタイル設定の結果:

API リファレンス

その他のリソース

関連トピック:

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