Angular Mask (マスク) ディレクティブの概要

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

Angular Mask の例

EXAMPLE

MODULES

TS

HTML

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { 
	IgxMaskModule,
	IgxInputGroupModule,
	IgxIconModule
 } from "igniteui-angular";
import { MaskSample2Component } from "./mask-sample-2/mask-sample-2.component";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	MaskSample2Component
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxMaskModule,
	IgxInputGroupModule,
	IgxIconModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
tsコピー

import { Component } from '@angular/core';

@Component({
  selector: 'app-mask-sample-2',
  styleUrls: ['./mask-sample-2.component.scss'],
  templateUrl: './mask-sample-2.component.html'
})
export class MaskSample2Component {

  constructor() { }

}
tsコピー

<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>
htmlコピー

Edit in: CodesandboxStackBlitz

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

60 以上のコンポーネント、柔軟な API、強力なテーマ設定およびブランディング機能、必要な速度と機能を備えた Angular アプリケーションを構築するための豊富な機能セット。

無料で試してみる

Ignite UI for Angular Mask を使用した作業の開始

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

ng add igniteui-angular
cmd

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

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

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 {}
typescript

あるいは、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 {}
typescript

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

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

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

// 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 = '';
    }
}
typescript

EXAMPLE

MODULES

TS

HTML

SCSS

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { 
	IgxSwitchModule,
	IgxMaskModule,
	IgxInputGroupModule
 } from "igniteui-angular";
import { MaskSample3Component } from "./mask-sample-3/mask-sample-3.component";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	MaskSample3Component
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxSwitchModule,
	IgxMaskModule,
	IgxInputGroupModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
tsコピー

import { Component } from '@angular/core';

@Component({
  selector: 'app-mask-sample-3',
  styleUrls: ['./mask-sample-3.component.scss'],
  templateUrl: './mask-sample-3.component.html'
})
export class MaskSample3Component {
  public socialSecurityNumber = '123-45-6789';
  public includeLiterals = true;

  public clear() {
    if (this.includeLiterals === false){
        this.socialSecurityNumber = '123-45-6789';
    } else {
        this.socialSecurityNumber = '';
    }
  }
}
tsコピー

<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>
htmlコピー

:host {
    display: block;
    padding: 16px;
}
scssコピー

Edit in: CodesandboxStackBlitz

マスク値を検証

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

// 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();
}
typescript

EXAMPLE

MODULES

TS

HTML

SCSS

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { 
	IgxSnackbarModule,
	IgxMaskModule,
	IgxInputGroupModule,
	IgxTextSelectionModule
 } from "igniteui-angular";
import { MaskSample1Component } from "./mask-sample-1/mask-sample-1.component";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	MaskSample1Component
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxSnackbarModule,
	IgxMaskModule,
	IgxInputGroupModule,
	IgxTextSelectionModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
tsコピー

import { Component } from '@angular/core';

@Component({
    selector: 'app-mask-sample-1',
    styleUrls: ['./mask-sample-1.component.scss'],
    templateUrl: './mask-sample-1.component.html'
})

export class MaskSample1Component {
    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.open(message);
    }
}
tsコピー

<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>
htmlコピー

igx-snackbar {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
}
scssコピー

Edit in: CodesandboxStackBlitz

テキスト選択

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 {}
typescript

次に、以下をテンプレートに追加します:

<igx-input-group>
    <input igxInput [igxMask]="'###-##-####'" [igxTextSelection]="true"/>
</igx-input-group>
html

これが前のサンプルでどのように機能するかを確認できます。

コンポーネントが正しく動作するためには、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;
    }
}
typescript

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

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

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

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

EXAMPLE

MODULES

TS

HTML

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { 
	IgxMaskModule,
	IgxInputGroupModule,
	IgxIconModule,
	IgxTextSelectionModule
 } from "igniteui-angular";
import { MaskSample4Component } from "./mask-sample-4/mask-sample-4.component";
import { 
	DisplayFormatPipe,
	InputFormatPipe
 } from "./mask-sample-4/mask-sample-4.component";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	MaskSample4Component,
	DisplayFormatPipe,
	InputFormatPipe
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxMaskModule,
	IgxInputGroupModule,
	IgxIconModule,
	IgxTextSelectionModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
tsコピー

import { Component, Pipe, PipeTransform } from '@angular/core';

@Component({
    selector: 'app-mask-sample-4',
    templateUrl: './mask-sample-4.component.html'
})

export class MaskSample4Component {
    public value = 100;
    public displayFormat = new DisplayFormatPipe();
    public inputFormat = new InputFormatPipe();
}

@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;
    }
}
tsコピー

<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>
htmlコピー

Edit in: CodesandboxStackBlitz

プレースホルダーの追加

placeholder プロパティは、ネイティブ プレースホルダー属性として使用できます。placeholder に値が提供されない場合、マスクの値セットが使用されます。

value = null;
typescript

<igx-input-group>
    <label igxLabel>Date</label>
    <input igxInput
    type="text"
    [(ngModel)]="value"
    [igxMask]="'00/00/0000'"
    [placeholder]="'dd/mm/yyyy'"/>
</igx-input-group>
html

EXAMPLE

MODULES

TS

HTML

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { 
	IgxMaskModule,
	IgxInputGroupModule,
	IgxIconModule
 } from "igniteui-angular";
import { MaskSample5Component } from "./mask-sample-5/mask-sample-5.component";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	MaskSample5Component
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxMaskModule,
	IgxInputGroupModule,
	IgxIconModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
tsコピー

import { Component } from '@angular/core';

@Component({
    selector: 'app-mask-sample-5',
    templateUrl: './mask-sample-5.component.html'
})

export class MaskSample5Component {
    public value;
}
tsコピー

<igx-input-group>
    <label igxLabel>Date</label>
    <input igxInput
    type="text"
    [(ngModel)]="value"
    [igxMask]="'00/00/0000'"
    [placeholder]="'dd/mm/yyyy'"/>
</igx-input-group>
htmlコピー

Edit in: CodesandboxStackBlitz

API リファレンス

• IgxInputDirective
• IgxInputGroupComponent
• IgxMaskDirective
• IgxSnackbarComponent

その他のリソース

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

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