Label および Input

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

Label および Input デモ

使用方法

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

Note

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

Ignite UI for Angular Label および Input を初期化する前に、IgxInputGroupModuleapp.module.ts ファイルにインポートします。

// app.module.ts

...
import { IgxInputGroup } from 'igniteui-angular';

@NgModule({
    ...
    imports: [..., IgxInputGroup],
    ...
})
export class AppModule {}

Label および Input

HTML ラベルおよび入力は HTML フォームの基本要素です。igxLabel および igxInput ディレクティブの使用例:

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

結果は以下です。

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

検証

Ignite UI for Angular Input ディレクティブで検証が有効な場合にマテリアルに基づくスタイル設定を提供します。入力に required 属性を追加します。

<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 は one-way および two-way データ バインディングをサポートします。入力に両方向のデータ バインディングを追加します。以下はコンポーネントのコード:

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>

Input Group

Input Group コンポーネントの詳細についてはここを参照してください。

API リファレンス

その他のリソース

関連トピック:

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