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 リファレンス
その他のリソース
関連トピック:
コミュニティに参加して新しいアイデアをご提案ください。