Mask

テキスト入力フィールドに igxMask ディレクティブを適用し、構成可能なマスク ルールに基づいてユーザー入力を制御して表示される値を書式設定できます。入力オプションも構成できます。

Angular Mask の例

このサンプルが気に入りましたか? 完全な Angular ツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

codesandbox で表示 stackblitz で表示

使用方法

igxMask ディレクティブは text 型の入力に使用します。

はじめに、app.module.ts ファイルに IgxMaskModule と IgxInputGroupModule をインポートします。

// app.module.ts

...
import { IgxMaskModule, IgxInputGroupModule } from 'igniteui-angular';

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

サポートされる定義済みマスク ルール

マスク文字	説明
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>

正しく構成されていれば、ブラウザ上でデモサンプルを確認することができます。

書式設定付き/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 = "";
    }
}

codesandbox で表示 Stackblitz で表示

マスク値を検証

入力にマスクを設定し、入力した値を検証できます。以下の例は、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();
}

codesandbox で表示 Stackblitz で表示

テキスト選択

igxTextSelection を使用して、フォーカスがあるコンポーネントにすべての入力テキストを選択させることができます。Label および Input で igxTextSelection の詳細情報を参照してください。

app.module.ts ファイルに IgxToastModule をインポートします:

...
import { ..., IgxTextSelectionModule } from 'igniteui-angular';

@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 {
        return value + " %";
    }
}

@Pipe({ name: "inputFormat" })
export class InputFormatPipe implements PipeTransform {
    public transform(value: any): string {
        return value;
    }
}

focusedValuePipe や displayValuePipe 入力プロパティに各パイプのインスタンスを渡します。

public value = 100;
public displayFormat = new DisplayFormatPipe();
public inputFormat = new InputFormatPipe();

<igx-input-group>
    <label igxLabel for="email">Increase</label>
    <input igxInput
    type="text"
    [(ngModel)]="value"
    [igxMask]="'000'"
    [igxTextSelection]="true"
    [focusedValuePipe]="inputFormat"
    [displayValuePipe]="displayFormat"/>
</igx-input-group>

'%' 記号が blur の値に追加されて (ユーザーが入力以外をクリックした場合など) 入力がフォーカスを取得すると削除されます。

codesandbox で表示 Stackblitz で表示

プレースホルダーの追加

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>

codesandbox で表示 Stackblitz で表示

API リファレンス

• IgxInputDirective
• IgxInputGroupComponent
• IgxMaskDirective
• IgxSnackbarComponent

その他のリソース

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

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