Descripción general de la directiva de mascarillas de Angular
Al aplicar laigxMask directiva en un campo de entrada de texto, el desarrollador puede controlar la entrada del usuario y formatear el valor visible, basándose en reglas de máscara configurables. Ofrece diferentes opciones de entrada y facilidad de uso y configuración.
Angular Mask Example
Getting Started with Ignite UI for Angular Mask
Para comenzar con la directiva Ignite UI for Angular Mask, primero debe instalar Ignite UI for Angular. En una aplicación Angular existente, escriba el siguiente comando:
ng add igniteui-angular
Para obtener una introducción completa al Ignite UI for Angular, lea el tema de introducción.
El siguiente paso es importar elIgxMaskModule yIgxInputGroupModule en tu archivo app.module.ts.
Note
igxMaskla directiva se utiliza en una entrada de texto tipográfico.
// 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 puedes importarlosIgxMaskDirective como una dependencia independiente.
// 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 {}
Ahora que tienes importado el módulo o directiva Ignite UI for Angular Mask, puedes empezar a usar laigxMask directiva.
Using the Angular Mask
Supported Built-in Mask Rules
| Personaje de máscara | Descripción |
|---|---|
| 0 | requiere un dígito (0-9) |
| 9 | requiere un dígito (0-9) o un espacio |
| # | requiere un dígito (0-9), un signo más (+) o menos (-) |
| l | requiere una letra (aZ) |
| ? | requiere una letra (aZ) o un espacio |
| A | requiere un carácter alfanumérico (0-9, aZ) |
| a | requiere un carácter alfanumérico (0-9, aZ) o un espacio |
| & | cualquier carácter del teclado (excluyendo el espacio) |
| C | cualquier carácter del teclado |
Apply Mask on Input
En el siguiente ejemplo, aplicamos un número de teléfono con una máscara de extensión a una 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>
Si está configurado correctamente, debería ver la muestra de demostración en su navegador.
Note
SoportaIgxMaskDirective la entrada IME y actualiza la máscara cuando termina la composición.
Bind to Formatted/Raw Value
Usa laincludeLiterals entrada para configurar qué valor de entrada (formateado o en bruto) asignar en tu formulario cuando se aplique una máscara específica. Por defecto,includeLiterals se pone en falso y se utiliza el valor bruto.
<!--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
Además de configurar una máscara para una entrada, también puede validar el valor ingresado. El siguiente ejemplo implementa máscaras, validación y notificación de datos no válidos utilizando la directiva Mask y el 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
Puedes forzar que el componente seleccione todo el texto de entrada en enfoque usandoigxTextSelection. Encuentra más informaciónigxTextSelection en Etiqueta & Entrada.
ImportalosIgxTextSelectionModule en tu archivo 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 {}
Luego agregue esto a la plantilla:
<igx-input-group>
<input igxInput [igxMask]="'###-##-####'" [igxTextSelection]="true"/>
</igx-input-group>
Puedes ver cómo funciona esto en el ejemplo anterior.
Note
Para que el componente funcione correctamente, es crucial configurarigxTextSelection la directivaigxMask. La razón de esto es que ambas directivas operan sobre el evento de entradafocus, por lo que la selección de texto debería hacerse después de que la máscara esté establecida.
Apply additional formatting on focus and blur
Además del comportamiento por defecto de la máscara, el usuario puede implementar sus propios canales personalizados y aprovechar lasfocusedValuePipe propiedades de entradadisplayValuePipe para transformar el valor a una salida deseada cuando la entrada recibe o pierde enfoque. Esto no afectará al valor subyacente del modelo. ¡Vamos a demostrar cómo se puede lograr esto!
Implemente dos tuberías que agregarán/eliminarán un signo '%' al final del valor mostrado:
@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;
}
}
Pasa una instancia de cada tubería a lasfocusedValuePipe propiedades de entrada ydisplayValuePipe de la siguiente manera:
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, se debe agregar un signo '%' al valor en desenfoque (es decir, cuando el usuario hace clic fuera de la entrada) y se eliminará una vez que la entrada se enfoque.
Adding a placeholder
El usuario también puede aprovechar laplaceholder propiedad de entrada, que cumple la función del atributo marcador de posición nativo de entrada. Si no se proporciona ningún valor para elplaceholder, se utiliza el conjunto de valores para la máscara.
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
Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.
GitHub