Mask

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

    Angular Mask の例

    使用方法

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

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

    // 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) を構成します。デフォルトで includeLiteralsfalse に設定し、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 および InputigxTextSelection の詳細情報を参照してください。

    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 動作に加え、カスタムパイプを実装して focusedValuePipedisplayValuePipe 入力プロパティで入力がフォーカスを 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;
        }
    }
    

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

    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 の値に追加されて (ユーザーが入力以外をクリックした場合など) 入力がフォーカスを取得すると削除されます。

    プレースホルダーの追加

    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 リファレンス

    その他のリソース

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