Angular 마스크 지침 개요

다음에 적용함으로써igxMask A 지시에 대한 텍스트 입력 필드 개발자는 설정 가능한 마스크 규칙에 따라 사용자 입력을 제어하고 가시 값을 포맷할 수 있습니다. 다양한 입력 옵션과 사용 및 설정의 용이성을 제공합니다.

Angular Mask Example

Getting Started with Ignite UI for Angular Mask

Ignite UI for Angular Mask 지시문을 시작하려면 먼저 Ignite UI for Angular 설치해야 합니다. 기존 Angular 애플리케이션에서 다음 명령을 입력합니다.

ng add igniteui-angular

Ignite UI for Angular에 대한 전체 소개는 시작 항목을 참조하십시오.

다음 단계는 다음 단계를 가져오는 것입니다.IgxMaskModule 그리고IgxInputGroupModule 당신의 app.module.ts 파일.

Note

igxMask입력 텍스트에 대해 지시가 사용됩니다.

// app.module.ts

...
import { IgxMaskModule } from 'igniteui-angular/input-group';
import { IgxInputGroupModule } from 'igniteui-angular/input-group';
// 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/input-group';
// 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 마스크 모듈이나 디렉티브를 가져왔으니, 디렉티브 사용을igxMask 시작할 수 있습니다.

Using the Angular Mask

Supported Built-in Mask Rules

마스크 캐릭터	설명
0	숫자(0-9)가 필요합니다.
9	숫자(0-9) 또는 공백이 필요합니다.
#	숫자(0-9), 더하기(+) 또는 빼기(-) 기호가 필요합니다.
엘	문자(aZ)가 필요합니다.
?	문자(aZ) 또는 공백이 필요합니다.
ㅏ	영숫자(0-9, aZ)가 필요합니다.
ㅏ	영숫자(0-9, aZ) 또는 공백이 필요합니다.
&	모든 키보드 문자(공백 제외)
씨	모든 키보드 문자

Apply Mask on Input

다음 예에서는 확장 마스크가 있는 전화번호를 입력에 적용합니다.

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

IMEIgxMaskDirective 입력을 지원하며 컴포지션이 끝나면 마스크를 업데이트합니다.

Bind to Formatted/Raw Value

입력을includeLiterals 사용해 특정 마스크가 적용될 때 폼에 어떤 입력값(포맷된 값인지 RAW)을 바인딩할지 설정하세요. 기본적으로 는includeLiterals false로 설정되어 있고 원시 값이 사용됩니다.

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

Validate Masked Values

입력에 마스크를 설정하는 것 외에도 입력한 값의 유효성을 검사할 수도 있습니다. 다음 예제에서는 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();
}

Text Selection

컴포넌트가 포커스igxTextSelection에 입력된 모든 텍스트를 선택하도록 강제할 수 있습니다. 자세한 정보는igxTextSelection 라벨 및 입력 페이지에서 확인하세요.

임포트IgxTextSelectionModule 당신의 app.module.ts 파일:

...
import { ..., IgxTextSelectionModule } from 'igniteui-angular/input-group';
// 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

구성 요소가 제대로 작동하려면 지시문 이후에igxTextSelection 설정igxMask 하는 것이 매우 중요합니다. 이유는 두 명령 모두 입력focus 이벤트에 대해 작동하기 때문에 텍스트 선택은 마스크가 설정된 후에 이루어져야 하기 때문입니다.

Apply additional formatting on focus and blur

기본 마스크 동작 외에도, 사용자는 자신만의 커스텀 파이프를 구현하여 입력focusedValuePipe이displayValuePipe 초점을 맞거나 잃을 때 원하는 출력으로 변환할 수 있습니다. 이는 기초 모델 가치에 영향을 미치지 않습니다. 이제 어떻게 달성할 수 있는지 시연해 보겠습니다!

표시된 값 끝에 '%' 기호를 추가/제거하는 두 개의 파이프를 구현합니다.

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

결과적으로 '%' 기호는 흐림 값(예: 사용자가 입력 외부를 클릭할 때)에 추가되어야 하며 입력에 초점이 맞춰지면 제거됩니다!

Adding a placeholder

사용자는 또한 입력 속성을 활용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 References

Additional Resources

우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.

Angular 마스크 지침 개요

Angular Mask Example

Getting Started with Ignite UI for Angular Mask

Note

Using the Angular Mask

Supported Built-in Mask Rules

Apply Mask on Input

Note

Bind to Formatted/Raw Value

Validate Masked Values

Text Selection

Note

Apply additional formatting on focus and blur

Adding a placeholder

API References

Additional Resources

테마