Descripción general de la directiva de máscara 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.
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 a la Ignite UI for Angular, lea el tema de introducción.
El siguiente paso es importar IgxMaskModule e IgxInputGroupModule en su archivo app.module.ts.
Note
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 {}
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 {}
Ahora que tiene importada la directiva o el módulo Ignite UI for Angular Mask, puede comenzar a usar la directiva igxMask.
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
IgxMaskDirective admite la entrada de IME y actualiza la máscara cuando finaliza la composición.
Bind to Formatted/Raw Value
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>
// 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
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 {}
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 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.
Apply additional formatting on focus and blur
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 {
return value + ' %';
}
}
@Pipe({ name: 'inputFormat' })
export class InputFormatPipe implements PipeTransform {
public transform(value: any): string {
return value;
}
}
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();
<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>
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 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;
<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