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

    EXAMPLE
    TS
    HTML

    ¿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

    EXAMPLE
    TS
    HTML
    SCSS

    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

    EXAMPLE
    TS
    HTML
    SCSS

    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.

    EXAMPLE
    TS
    HTML

    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

    EXAMPLE
    TS
    HTML

    Referencias de API

    App Builder | CTA Banner

    Recursos adicionales

    Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.