Input Mask | Neural Native

Importación

component.ts

import { NeuInputMaskComponent } from '@neural-ui/native/input-mask';

Ejemplos

Importa ExampleComponent en su padre y coloca <app-example /> dentro del neu-theme raíz de tu aplicación. El preview aporta el marco y las zonas seguras; utiliza la estructura raíz de Instalación en tu app.

Encuentra tu reserva

Usa un localizador con máscara para mostrar una reserva local de ejemplo. La máscara da formato; no busca ni valida reservas en un servidor.

Ver y copiar el ejemplo completo

basic.component.ts

import { Component, signal } from '@angular/core';
import { NeuButtonComponent } from '@neural-ui/native/button';
import { NeuCardComponent } from '@neural-ui/native/card';
import { NeuInputMaskComponent } from '@neural-ui/native/input-mask';
import { View, Text, ScrollView } from '@ng-native/components';

@Component({
  selector: 'app-example',
  imports: [NeuButtonComponent, NeuCardComponent, NeuInputMaskComponent, View, Text, ScrollView],
  template: `
    <scroll-view class="product-scroll" keyboardShouldPersistTaps="handled" [showsVerticalScrollIndicator]="true"><view class="product-stack"><view class="product-section"><text class="product-title" accessibilityRole="header">Encuentra tu reserva</text><text class="product-caption">Seis dígitos, un formato claro</text></view>
    <view class="product-surface"><neu-input-mask requiredLabel="Obligatorio" label="Localizador de reserva" mask="###-###" keyboardType="numeric" [(value)]="reference" />
    <text class="product-caption">Encontrarás el localizador en el correo de confirmación.</text>
    <view class="product-actions"><neu-button label="Ver reserva" size="sm" [disabled]="reference().replaceAll('-', '').length !== 6" (pressed)="found.set(reference())" /></view></view>
    @if (found()) { <neu-card title="Comida del equipo el viernes" description="Neural Studio · 4 comensales" variant="outlined"><text class="product-caption">{{ found() }}</text></neu-card> }</view></scroll-view>
  `,
  styles: `
.actions { gap: 12px; align-items: flex-start; } text { color: var(--neu-text, #172033); font-size: 16px; }

:host { flex: 1; flex-shrink: 1; min-height: 0; }
.product-scroll { flex: 1; flex-shrink: 1; height: 0px; min-height: 0; }
.product-stack { gap: 24px; padding-bottom: 20px; }
.product-section { gap: 12px; }
.product-row { flex-direction: row; align-items: center; gap: 12px; }
.product-copy { flex: 1; min-width: 0; gap: 4px; }
.product-title { color: var(--neu-text, #172033); font-size: 24px; line-height: 30px; font-weight: 600; }
.product-heading { color: var(--neu-text, #172033); font-size: 17px; line-height: 23px; font-weight: 600; }
.product-caption { color: var(--neu-muted, #596477); font-size: 14px; line-height: 20px; }
.product-actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
.product-surface { gap: 16px; padding: 16px; border-radius: 16px; background-color: var(--neu-surface, #ffffff); border-width: 1px; border-color: var(--neu-border, #a5afbf); }

  `,
})
export class ExampleComponent {
  readonly reference = signal('');
  readonly found = signal('');
}

Número de teléfono

Escribe diez dígitos para aplicar los separadores de teléfono automáticamente.

Ver y copiar el ejemplo completo

phone-number.component.ts

import { Component, signal } from '@angular/core';
import { NeuInputMaskComponent } from '@neural-ui/native/input-mask';
import { View, Text, ScrollView } from '@ng-native/components';

@Component({
  selector: 'app-example',
  imports: [NeuInputMaskComponent, View, Text, ScrollView],
  template: `
    <scroll-view class="usage-scroll" keyboardShouldPersistTaps="handled"><view class="usage-stack">
    <neu-input-mask requiredLabel="Obligatorio" label="Teléfono de contacto" mask="(###) ###-####" keyboardType="phone-pad" [(value)]="phone" hint="Utiliza diez dígitos." /><text class="usage-caption">Teléfono guardado: {{ phone() }}</text>
    </view></scroll-view>
  `,
  styles: `
.actions { gap: 12px; align-items: flex-start; } text { color: var(--neu-text, #172033); font-size: 16px; }

.usage-scroll { flex: 1; }
.usage-stack { gap: 20px; padding-bottom: 20px; }
.usage-section { gap: 12px; }
.usage-heading { color: var(--neu-text, #172033); font-size: 16px; font-weight: 600; }
.usage-caption { color: var(--neu-muted, #64748b); font-size: 14px; }
.usage-row { flex-direction: row; flex-wrap: wrap; gap: 12px; align-items: center; }
.usage-actions { flex-direction: row; flex-wrap: wrap; gap: 8px; align-items: center; }


  `,
})
export class ExampleComponent {
  readonly phone = signal('');
}

Playground interactivo

Ajusta la configuración y prueba el resultado.

Capturas del dispositivo en inglés.

Input Mask · android · native capture — **Android**Captura nativa

Input Mask · ios · native capture — **iOS**Captura nativa

Referencia API

Inputs

Nombre	Tipo	Predeterminado	Enlace	Descripción
mask	string	Obligatorio	Input	Patrón de formato: # admite un dígito, A una letra latina y * una letra o un dígito. Los separadores literales se conservan; el campo vacío muestra guiones bajos en las posiciones editables.
keyboardType	"default" \| "numeric" \| "phone-pad"	'default'	Input	Distribución de teclado solicitada a la plataforma. No sustituye una regla de validación.
label	string	Obligatorio	Input	Nombre legible del control, acción o grupo.
disabled	boolean	false	Input	Desactiva la interacción del usuario. La aplicación puede seguir proporcionando valores.
readonly	boolean	false	Input	Impide editar o seleccionar desde el control y conserva el valor actual.
invalid	boolean	false	Input	Marca el control como inválido. El formulario o la aplicación aporta la regla de validación.
touched	boolean	false	Input	Estado de interacción con el campo, aportado manualmente o mediante Signal Forms.
hint	string	''	Input	Ayuda del campo que aparece cuando no se muestra un mensaje de error.
required	boolean	false	Input	Presentación de campo obligatorio. Define la regla de validación real en el formulario de tu aplicación.
requiredLabel	string	'Required'	Input	Requisito traducido que se anuncia con la ayuda cuando required es true. Required por defecto; no valida el valor.
error	string	''	Input	Mensaje de error aportado por la aplicación; combínalo con el estado invalid del control.

Models

Nombre	Tipo	Predeterminado	Enlace	Descripción
value	string	''	Model · bidireccional	Caracteres admitidos sin los separadores literales de la máscara. # admite dígitos, A letras y * caracteres alfanuméricos. La guía del campo vacío no se guarda en el modelo; enlaza el string sin formato mediante [(value)].

Outputs

Nombre	Payload	Cuándo se emite
valueChange	string	Emite el valor actualizado de value. [(value)] enlaza este output junto con su input model.
touch	void	Comunica la interacción del usuario al formulario o aplicación que lo contiene.

Estado de los models

Enlaza la signal con [(nombreModel)] sin llamarla. Utiliza nombreModel() para leer su valor.

model-fields.ts

import { signal } from '@angular/core';

// Fields inside your component class
readonly value = signal<string>('');