Angular Mask (マスク) ディレクティブの概要
テキスト入力フィールドに igxMask ディレクティブを適用し、構成可能なマスク ルールに基づいてユーザー入力を制御して表示される値を書式設定できます。入力オプションも構成できます。
Angular Mask の例
Ignite UI for Angular Mask を使用した作業の開始
Ignite UI for Angular Mask ディレクティブを使用した作業を開始するには、Ignite UI for Angular をインストールする必要があります。既存の Angular アプリケーションで、以下のコマンドを入力します。
ng add igniteui-angular
Ignite UI for Angular については、「はじめに」トピックをご覧ください。
次に、app.module.ts ファイルに IgxMaskModule と IgxInputGroupModule をインポートします。
Note
igxMask ディレクティブは、text タイプの入力で使用されます。
// app.module.ts
...
import { IgxMaskModule, IgxInputGroupModule } from 'igniteui-angular';
// import { IgxMaskModule, IgxInputGroupModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
...
imports: [..., IgxMaskModule, IgxInputGroupModule],
...
})
export class AppModule {}
あるいは、16.0.0 以降、IgxMaskDirective をスタンドアロンの依存関係としてインポートできます。
// home.component.ts
import { IgxMaskDirective, IGX_INPUT_GROUP_DIRECTIVES } from 'igniteui-angular';
// import { IgxMaskDirective, IGX_INPUT_GROUP_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
@Component({
selector: 'app-home',
template: `
<igx-input-group>
<igx-prefix>
<igx-icon>phone</igx-icon>
</igx-prefix>
<label igxLabel>Phone</label>
<input igxInput type="text" [igxMask]="'(####) 00-00-00 Ext. 9999'"/>
</igx-input-group>
`,
styleUrls: ['home.component.scss'],
standalone: true,
imports: [IgxMaskDirective, IGX_INPUT_GROUP_DIRECTIVES]
})
export class HomeComponent {}
Ignite UI for Angular Mask モジュールまたはディレクティブをインポートしたので、igxMask ディレクティブの使用を開始できます。
Angular Mask の使用
サポートされる定義済みマスク ルール
| マスク文字 | 説明 |
|---|---|
| 0 | 数値が必須 (0-9) |
| 9 | 数値 (0-9) またはスペースが必須 |
| # | 数値 (0-9)、正符号 (+)、または負符号 (-) が必須 |
| L | 英文字が必須 (a-Z) |
| ? | 英文字 (a-Z) またはスペースが必須 |
| A | 英数字が必須 (0-9、a-Z) |
| a | 英数字 (0-9、a-Z) またはスペースが必須 |
| & | 任意のキーボード文字 (スペース以外) |
| C | 任意のキーボード文字 |
マスクを入力に適用
以下の例では、内線を含む電話番号のマスクを入力に適用します。
<!--sample.component.html-->
<igx-input-group>
<igx-prefix>
<igx-icon>phone</igx-icon>
</igx-prefix>
<label igxLabel>Phone</label>
<input igxInput type="text" [igxMask]="'(####) 00-00-00 Ext. 9999'"/>
</igx-input-group>
正しく構成されていれば、ブラウザ上でデモサンプルを確認することができます。
Note
IgxMaskDirective は IME 入力をサポートし、合成が終了するとマスクを更新します。
書式設定付き/Raw 値にバインド
includeLiterals 入力を使用して、指定したマスクが適用される場合にフォームにバインドする入力値 (書式設定付きまたは Raw) を構成します。デフォルトで includeLiterals が false に設定し、Raw 値が使用されます。
<!--sample.component.html-->
<igx-switch [(ngModel)]="includeLiterals" (change)="clear()">
Include Literals
</igx-switch>
<igx-input-group>
<label igxLabel>
Social Security Number
</label>
<input #ssn name="socialSecurityNumber" type="text"
igxInput
[igxMask]="'###-##-####'"
[(ngModel)]="socialSecurityNumber"
[includeLiterals]="includeLiterals" />
</igx-input-group>
<p *ngIf="socialSecurityNumber.length > 0">Value: {{ socialSecurityNumber }}</p>
// sample.component.ts
public socialSecurityNumber: string = '123-45-6789';
public includeLiterals: boolean = true;
public clear() {
if (this.includeLiterals === false){
this.socialSecurityNumber = '123-45-6789';
} else {
this.socialSecurityNumber = '';
}
}
マスク値を検証
入力にマスクを設定し、入力した値を検証できます。以下の例は、Mask ディレクティブおよび Snack Bar コンポーネントを使用してマスクを実装し、無効なデータのための検証および通知を実装します。
<!--sample.component.html-->
<igx-input-group>
<label igxLabel for="birthday">Birthday</label>
<input igxInput #dateInput [igxMask]="'00/00/0000'" [igxTextSelection]="true" name="birthday" type="text"
(blur)="validateDate(dateInput, snackbar)" />
</igx-input-group>
<igx-snackbar #snackbar></igx-snackbar>
// sample.component.ts
public validateDate(dateInput, snackbar) {
if (!this.isDateValid(dateInput.value)) {
this.notify(snackbar, 'Invalid Date', dateInput);
}
}
private isDateValid(date) {
return (new Date(date).toLocaleString() !== 'Invalid Date');
}
private notify(snackbar, message, input) {
snackbar.message = message;
snackbar.show();
}
テキスト選択
igxTextSelection を使用して、フォーカスがあるコンポーネントにすべての入力テキストを選択させることができます。Label および Input で igxTextSelection の詳細情報を参照してください。
app.module.ts ファイルに IgxTextSelectionModule をインポートします:
...
import { ..., IgxTextSelectionModule } from 'igniteui-angular';
// import { ..., IgxTextSelectionModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
...
imports: [..., IgxTextSelectionModule]
...
})
export class AppModule {}
次に、以下をテンプレートに追加します:
<igx-input-group>
<input igxInput [igxMask]="'###-##-####'" [igxTextSelection]="true"/>
</igx-input-group>
これが前のサンプルでどのように機能するかを確認できます。
Note
コンポーネントが正しく動作するためには、igxMask ディレクティブの後に igxTextSelection を設定することが重要です。これは、両方のディレクティブが入力 focus イベントで動作するため、マスクが設定された後にテキスト選択が行われるからです。
focus と blur に追加の書式を適用
デフォルトの mask 動作に加え、カスタムパイプを実装して focusedValuePipe や displayValuePipe 入力プロパティで入力がフォーカスを get または lost した場合に値を必要なアウトプットへ変換できます。基になるモデル値に影響はありません。以下はその方法です。
表示値の最後に '%' サインを追加または削除する 2 つのパイプを実装します。
@Pipe({ name: 'displayFormat' })
export class DisplayFormatPipe implements PipeTransform {
public transform(value: any): string {
if (value !== null && value !== undefined) {
value = value.toString().trim();
if (!value.endsWith('%')) {
value += ' %';
}
}
return value;
}
}
@Pipe({ name: 'inputFormat' })
export class InputFormatPipe implements PipeTransform {
public transform(value: any): string {
if (value !== null && value !== undefined) {
value = value.toString().replace(/%/g, '').trim();
}
return value;
}
}
focusedValuePipe や displayValuePipe 入力プロパティに各パイプのインスタンスを渡します。
public value = 100;
public displayFormat = new DisplayFormatPipe();
public inputFormat = new InputFormatPipe();
<igx-input-group>
<label igxLabel>Increase</label>
<input
igxInput
type="text"
[(ngModel)]="value"
[igxMask]="'000'"
[igxTextSelection]="true"
[focusedValuePipe]="inputFormat"
[displayValuePipe]="displayFormat"
/>
</igx-input-group>
'%' 記号が blur の値に追加されて (ユーザーが入力以外をクリックした場合など) 入力がフォーカスを取得すると削除されます。
プレースホルダーの追加
placeholder プロパティは、ネイティブ プレースホルダー属性として使用できます。placeholder に値が提供されない場合、マスクの値セットが使用されます。
value = null;
<igx-input-group>
<label igxLabel>Date</label>
<input igxInput
type="text"
[(ngModel)]="value"
[igxMask]="'00/00/0000'"
[placeholder]="'dd/mm/yyyy'"/>
</igx-input-group>
API リファレンス
その他のリソース
コミュニティに参加して新しいアイデアをご提案ください。
GitHub