Visão geral da diretiva de máscara Angular
Ao aplicar a diretiva igxMask em um campo de entrada de texto, o desenvolvedor pode controlar a entrada do usuário e formatar o valor visível, com base em regras de máscara configuráveis. Ela fornece diferentes opções de entrada e facilidade de uso e configuração.
Angular Mask Example
Getting Started with Ignite UI for Angular Mask
Para começar a usar a diretiva Ignite UI for Angular Mask, primeiro você precisa instalar Ignite UI for Angular. Em um aplicativo Angular existente, digite o seguinte comando:
ng add igniteui-angular
Para obter uma introdução completa ao Ignite UI for Angular, leia o tópico de introdução.
O próximo passo é importar o IgxMaskModule e IgxInputGroupModule no seu arquivo app.module.ts.
Note
A diretiva igxMask é usada em uma entrada do tipo 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 {}
Como alternativa, a partir da 16.0.0 você pode importar o IgxMaskDirective como uma dependência autônoma.
// 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 {}
Agora que você importou o módulo ou a diretiva Ignite UI for Angular Mask, você pode começar a usar a diretiva igxMask.
Using the Angular Mask
Supported Built-in Mask Rules
| Personagem de máscara | Descrição |
|---|---|
| 0 | requer um dígito (0-9) |
| 9 | requer um dígito (0-9) ou um espaço |
| # | requer um dígito (0-9), sinal de mais (+) ou menos (-) |
| eu | requer uma letra (aZ) |
| ? | requer uma letra (aZ) ou um espaço |
| UM | requer um alfanumérico (0-9, aZ) |
| um | requer um alfanumérico (0-9, aZ) ou um espaço |
| & | qualquer caractere do teclado (excluindo espaço) |
| C | qualquer caractere do teclado |
Apply Mask on Input
No exemplo a seguir, aplicamos um número de telefone com uma máscara de ramal a uma entrada.
<!--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>
Se configurado corretamente, você deverá ver o exemplo de demonstração no seu navegador.
Note
A IgxMaskDirective suporta entrada IME e atualiza a máscara quando a composição termina.
Bind to Formatted/Raw Value
Use a entrada includeLiterals para configurar qual valor de entrada (formatado ou bruto) vincular em seu formulário quando uma máscara específica for aplicada. Por padrão, includeLiterals é definido como false e o valor bruto é usado.
<!--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
Além de definir uma máscara para uma entrada, você pode validar o valor inserido também. O exemplo a seguir implementa máscaras, validação e notificação para dados inválidos usando a diretiva Mask e o componente 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
Você pode forçar o componente a selecionar todo o texto de entrada em foco usando igxTextSelection. Encontre mais informações sobre igxTextSelection em Label & Input.
Importe o IgxTextSelectionModule no seu arquivo app.module.ts:
...
import { ..., IgxTextSelectionModule } from 'igniteui-angular';
// import { ..., IgxTextSelectionModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
...
imports: [..., IgxTextSelectionModule]
...
})
export class AppModule {}
Em seguida, adicione isto ao modelo:
<igx-input-group>
<input igxInput [igxMask]="'###-##-####'" [igxTextSelection]="true"/>
</igx-input-group>
Você pode ver como isso funciona no exemplo anterior.
Note
Para que o componente funcione corretamente, é crucial definir igxTextSelection após a diretiva igxMask. O motivo para isso é que ambas as diretivas operam no evento focus de entrada, então a seleção de texto deve acontecer após a máscara ser definida.
Apply additional formatting on focus and blur
Além do comportamento de máscara padrão, o usuário pode implementar seus próprios pipes personalizados e aproveitar as propriedades de entrada focusedValuePipe e displayValuePipe para transformar o valor em uma saída desejada quando a entrada obtém ou perde o foco. Isso não afetará o valor do modelo subjacente. Vamos demonstrar como isso pode ser alcançado!
Implemente dois pipes que irão acrescentar/remover um sinal '%' no final do valor exibido:
@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;
}
}
Passe uma instância de cada pipe para as propriedades de entrada focusedValuePipe e displayValuePipe da seguinte maneira:
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>
Como resultado, um sinal '%' deve ser acrescentado ao valor de desfoque (ou seja, quando o usuário clica fora da entrada) e será removido quando a entrada receber foco!
Adding a placeholder
O usuário também pode aproveitar a propriedade placeholder input , que serve ao propósito do atributo placeholder input nativo. Se nenhum valor for fornecido para o placeholder, o valor definido para a máscara será usado.
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
Nossa comunidade é ativa e sempre acolhedora para novas ideias.
GitHub