Angular 마스크 지시문 개요
적용함으로써 igxMask에 대한 지시어 텍스트 입력 필드을 사용하면 개발자는 구성 가능한 마스크 규칙에 따라 사용자 입력을 제어하고 표시되는 값의 형식을 지정할 수 있습니다. 다양한 입력 옵션을 제공하고 사용 및 구성이 쉽습니다.
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 지시어는 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 가져왔으므로 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
IgxMaskDirective는 IME 입력을 지원하고 구성이 끝나면 마스크를 업데이트합니다.
Bind to Formatted/Raw Value
특정 마스크가 적용될 때 양식에 바인딩할 입력 값(형식 또는 원시)을 구성하려면 includeLiterals 입력을 사용하십시오. 기본적으로 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';
// 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 이벤트에서 작동하므로 마스크가 설정된 후에 텍스트 선택이 발생해야 하기 때문입니다.
Apply additional formatting on focus and blur
기본 마스크 동작 외에도 사용자는 자신의 사용자 지정 파이프를 구현하고 focusedValuePipe 및 displayValuePipe 입력 속성을 활용하여 입력이 포커스를 얻거나 잃을 때 값을 원하는 출력으로 변환할 수 있습니다. 이는 기본 모델 값에 영향을 미치지 않습니다. 이것이 어떻게 달성될 수 있는지 보여드리겠습니다!
표시된 값 끝에 '%' 기호를 추가/제거하는 두 개의 파이프를 구현합니다.
@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>
결과적으로 '%' 기호는 흐림 값(예: 사용자가 입력 외부를 클릭할 때)에 추가되어야 하며 입력에 초점이 맞춰지면 제거됩니다!
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
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.
GitHub