Angular Label & Input (ラベル & 入力) ディレクティブの概要

Ignite UI for Angular Input および Label ディレクティブを使用すると、igx-input-group コンポーネント内の単一行または複数行の入力要素を装飾およびスタイル設定できます。

Angular Label および Input の例

Ignite UI for Angular Label & Input を使用した作業の開始

Ignite UI for Angular Label & Input ディレクティブを使用した作業を開始するには、Ignite UI for Angular をインストールする必要があります。既存の Angular アプリケーションで、以下のコマンドを入力します。

ng add igniteui-angular

Ignite UI for Angular については、「はじめに」トピックをご覧ください。

次に、app.module.ts ファイルに IgxInputGroupModule をインポートします。

// app.module.ts

import { FormsModule } from '@angular/forms';
import { IgxInputGroupModule } from 'igniteui-angular/input-group';
// import { IgxInputGroupModule } from '@infragistics/igniteui-angular'; for licensed package

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

あるいは、16.0.0 以降、IgxLabelDirective、IgxInputDirective、および IgxInputGroupComponent をスタンドアロンの依存関係としてインポートすることも、IGX_INPUT_GROUP_DIRECTIVES トークンを使用してコンポーネントとそのすべてのサポート コンポーネントおよびディレクティブをインポートすることもできます。

// home.component.ts

import { FormsModule } from '@angular/forms';
import { IGX_INPUT_GROUP_DIRECTIVES } from 'igniteui-angular/input-group';
// import { IGX_INPUT_GROUP_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package

@Component({
  selector: 'app-home',
  template: `
    <igx-input-group>
      <input igxInput name="fullName" type="text" [(ngModel)]="fullName" />
      <label igxLabel for="fullName">Full Name</label>
    </igx-input-group>
  `,
  styleUrls: ['home.component.scss'],
  standalone: true,
  imports: [IGX_INPUT_GROUP_DIRECTIVES, FormsModule],
  /* or imports: [IgxInputGroupComponent, IgxLabelDirective, IgxInputDirective, FormsModule] */
})
export class HomeComponent {
  public fullName = 'John Doe';
}

Ignite UI for Angular Input Group モジュールまたはディレクティブをインポートしたので、igxLabel & igxInput ディレクティブおよび igx-input-group コンポーネントの使用を開始できます。

Angular 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>

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

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

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

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

<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>

Input Group

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

API リファレンス

• IgxLabelDirective
• IgxInputDirective
• InputGroup

その他のリソース

関連トピック:

• Input Group

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

• Ignite UI for Angular フォーラム (英語)
• Ignite UI for Angular GitHub (英語)