Descripción general de la directiva de mascarillas de Angular
Al aplicar la directiva igxMask
en un campo de entrada de texto, el desarrollador puede controlar la entrada del usuario y formatear el valor visible, según reglas de máscara configurables. Proporciona diferentes opciones de entrada y facilidad de uso y configuración.
Ejemplo de mascarilla Angular
¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Angular completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.
Primeros pasos con 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
cmd
Para obtener una introducción completa al Ignite UI for Angular, lea el tema de introducción.
El siguiente paso es importar IgxMaskModule
e IgxInputGroupModule
en su archivo app.module.ts.
La directiva igxMask
se utiliza en una entrada de tipo texto.
// 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 {}
typescript
Alternativamente, a partir de 16.0.0
puede importar IgxMaskDirective
como una dependencia independiente.
// 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 {}
typescript
Ahora que tiene importado el módulo o la directiva Ignite UI for Angular Mask, puede empezar a usar la igxMask
directiva.
Uso de la mascarilla Angular
Reglas de máscara integradas admitidas
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 |
Aplicar máscara en la entrada
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>
html
Si está configurado correctamente, debería ver la muestra de demostración en su navegador.
IgxMaskDirective
admite la entrada de IME y actualiza la máscara cuando finaliza la composición.
Vincular a valor formateado/sin formato
Utilice la entrada includeLiterals
para configurar qué valor de entrada (formateado o sin formato) vincular en su formulario cuando se aplica una máscara específica. De forma predeterminada, includeLiterals
se establece en falso y se utiliza el valor sin formato.
<!--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>
html
// 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 = '';
}
}
typescript
Validar valores enmascarados
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>
html
// 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();
}
typescript
Selección de texto
Puede forzar al componente a seleccionar todo el texto de entrada enfocado usando igxTextSelection
. Encuentre más información sobre igxTextSelection
en Label & Input.
Importe IgxTextSelectionModule
en su archivo app.module.ts:
...
import { ..., IgxTextSelectionModule } from 'igniteui-angular';
// import { ..., IgxTextSelectionModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
...
imports: [..., IgxTextSelectionModule]
...
})
export class AppModule {}
typescript
Luego agregue esto a la plantilla:
<igx-input-group>
<input igxInput [igxMask]="'###-##-####'" [igxTextSelection]="true"/>
</igx-input-group>
html
Puedes ver cómo funciona esto en el ejemplo anterior.
Para que el componente funcione correctamente, es fundamental configurar igxTextSelection
después de la directiva igxMask
. La razón de esto es que ambas directivas operan en el evento focus
de entrada, por lo que la selección de texto debe realizarse después de configurar la máscara.
Aplicar formato adicional al enfocar y desenfocar
Además del comportamiento de máscara predeterminado, el usuario puede implementar sus propias canalizaciones personalizadas y aprovechar las propiedades de entrada focusedValuePipe
y displayValuePipe
para transformar el valor en una salida deseada cuando la entrada obtiene o pierde el foco. Esto no afectará el valor del modelo subyacente. ¡Demostremos 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;
}
}
typescript
Pase una instancia de cada tubería a las propiedades de entrada focusedValuePipe
y displayValuePipe
de la siguiente manera:
public value = 100;
public displayFormat = new DisplayFormatPipe();
public inputFormat = new InputFormatPipe();
typescript
<igx-input-group>
<label igxLabel>Increase</label>
<input
igxInput
type="text"
[(ngModel)]="value"
[igxMask]="'000'"
[igxTextSelection]="true"
[focusedValuePipe]="inputFormat"
[displayValuePipe]="displayFormat"
/>
</igx-input-group>
html
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.
Agregar un marcador de posición
El usuario también puede aprovechar la propiedad de entrada placeholder
, que cumple el propósito del atributo de marcador de posición de entrada nativo. Si no se proporciona ningún valor para el placeholder
, se utiliza el valor establecido para la máscara.
value = null;
typescript
<igx-input-group>
<label igxLabel>Date</label>
<input igxInput
type="text"
[(ngModel)]="value"
[igxMask]="'00/00/0000'"
[placeholder]="'dd/mm/yyyy'"/>
</igx-input-group>
html
Referencias de API
Recursos adicionales
Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.