Visão geral da diretiva de máscara Angular
Ao aplicar aigxMask diretiva 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. Ele oferece 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 oIgxMaskModule eIgxInputGroupModule no seu arquivo app.module.ts.
Note
igxMaska diretiva é usada em uma entrada de texto do tipo.
// 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 {}
Alternativamente,16.0.0 você pode importar comoIgxMaskDirective uma dependência independente.
// 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 {}
Agora que você importou o módulo ou diretiva Ignite UI for Angular Mask, pode começar a usar aigxMask diretiva.
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
EleIgxMaskDirective suporta entrada de IME e atualiza a máscara quando a composição termina.
Bind to Formatted/Raw Value
Use aincludeLiterals entrada para configurar qual valor de entrada (formatado ou bruto) deve ser vinculado no seu formulário quando uma máscara específica for aplicada. Por padrão,includeLiterals é definido como falso 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 no foco usandoigxTextSelection isso. Encontre mais informações emigxTextSelection Label & Input.
Importe issoIgxTextSelectionModule no seu arquivo 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 {}
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 definirigxTextSelection após aigxMask diretiva. O motivo para isso é que ambas as diretivas operam sobre o evento de entradafocus, então a seleção de texto deve acontecer depois que a máscara está definida.
Apply additional formatting on focus and blur
Além do comportamento padrão da máscara, o usuário pode implementar seus próprios pipelines personalizados e aproveitar asfocusedValuePipe propriedades de entradadisplayValuePipe para transformar o valor em uma saída desejada quando a entrada recebe 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 asfocusedValuePipe propriedades de entrada edisplayValuePipe da seguinte forma:
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 aplaceholder propriedade de entrada, que serve ao propósito do atributo de entrada nativa. Se nenhum valor for fornecido para oplaceholder, o conjunto de valores para a máscara é 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