Directivas de Input

Paquete: @tiendana/ngx-core/forms

Las directivas de input proporcionan transformaciones automáticas del valor ingresado por el usuario. Son útiles para normalizar datos y aplicar reglas de formato sin lógica adicional en el componente.

Características

✅ inputLowerCase: minúsculas y trim() en cada pulsación
✅ inputRegex: conserva (only) o elimina (remove) los caracteres que coinciden con un patrón
✅ Escriben el valor transformado en el FormControl con setValue, así que el valor del formulario y el del campo coinciden
✅ Se combinan con tdnControl y tdn-form-element sin configuración adicional

Ambas actúan sobre el evento input y se enlazan solo a controles con formControlName.

inputLowerCase

Convierte automáticamente el texto ingresado a minúsculas y elimina espacios en blanco al inicio y final.

Selector

[inputLowerCase] (solo funciona con formControlName)

Comportamiento

• Convierte todo el texto a minúsculas
• Aplica .trim() para eliminar espacios al inicio y al final
• Se activa en el evento input
• Escribe el resultado con control.setValue(...)

trim() en cada pulsación

Como el recorte se aplica en cada evento input, un espacio tecleado al final se elimina de inmediato: escribir juan, espacio y perez produce juanperez. Solo sobreviven los espacios interiores de un texto pegado entero. Úsala en campos que no llevan espacios (usuarios, correos, slugs, códigos).

Ejemplo

Cargando demo...

Ver código

Resultado:

• Texto pegado de una vez: " Juan PEREZ " → "juan perez"
• Tecleado letra a letra: "juanperez" (el espacio se recorta en cada pulsación)

Casos de Uso

• Nombres de usuario
• Emails (aunque el tipo email ya es case-insensitive)
• Slugs o URLs amigables
• Códigos que requieren formato uniforme

---

inputRegex

Filtra o restringe el texto ingresado basándose en una expresión regular.

Selector

[inputRegex] (solo funciona con formControlName)

Inputs

Input	Tipo	Descripción	Requerido
inputRegex	string	Expresión regular (sin delimitadores /)	✅
inputRegexMode	'only' | 'remove'	Modo de filtrado (default: 'only')	❌

Modos

only (por defecto)

Solo permite caracteres que coincidan con el regex. Cualquier carácter que no coincida es eliminado.

// Solo números
inputRegex="[0-9]"

// Usuario ingresa: "abc123xyz"
// Valor resultante: "123"

remove

Elimina caracteres que coincidan con el regex. Es el comportamiento inverso.

// Remover números
inputRegex="[0-9]"
inputRegexMode="remove"

// Usuario ingresa: "abc123xyz"
// Valor resultante: "abcxyz"

Ejemplos

Solo Números

Cargando demo...

Ver código

Solo Letras y Espacios

Cargando demo...

Ver código

Solo Alfanuméricos

Cargando demo...

Ver código

Solo Letras (Remover Números y Símbolos)

Cargando demo...

Ver código

Patrones Regex Comunes

Patrón	Regex	Descripción
Solo números	[0-9]	Dígitos del 0 al 9
Solo letras	[a-zA-Z]	Letras mayúsculas y minúsculas
Alfanumérico	[a-zA-Z0-9]	Letras y números
Con acentos	[a-zA-ZáéíóúÁÉÍÓÚñÑ]	Incluye caracteres latinos
Hexadecimal	[0-9a-fA-F]	Números hexadecimales
Email chars	[a-z0-9.@_-]	Caracteres comunes en emails
URL safe	[a-zA-Z0-9-_.]	Caracteres seguros para URLs

Combinando Ambas Directivas

Puedes combinar inputLowerCase e inputRegex:

Cargando demo...

Ver código

Cómo se aplican: Cada directiva escucha el evento input por su cuenta, lee el valor actual del elemento y lo reescribe con setValue. No hay un orden garantizado entre ellas, así que escribe un patrón que acepte ambas cajas ([a-zA-Z0-9_]): el resultado final es el mismo corra primero la que corra.

Dentro de un tdn-form-element

Las directivas conviven con tdnControl y con el sistema de errores: validan sobre el valor ya transformado.

<tdn-form-element>
  <label for="code">Código</label>
  <input id="code" formControlName="code" tdnControl inputRegex="[A-Z0-9]" maxlength="8" />
  <div [tdnErrors]="'code'">
    <span tdnError="required" when="touched">El código es obligatorio</span>
    <span tdnError="pattern" when="dirty">Debe tener 8 caracteres</span>
  </div>
</tdn-form-element>

code: ['', [Validators.required, Validators.pattern('[A-Z0-9]{8}')]]

Consideraciones

Limitaciones

• Solo funcionan con controles vinculados vía formControlName: el selector es [formControlName][inputLowerCase] / [formControlName][inputRegex], por lo que no se enlazan a [formControl] ni a ngModel
• inputRegex compila el patrón (con la bandera g) la primera vez que se escribe; cambiar después el valor de inputRegex no tiene efecto
• Un patrón inválido lanza un SyntaxError en cada pulsación (la directiva no llega a escribir el valor)
• El regex se ejecuta en cada evento input, puede afectar performance con patrones complejos

Alternativa con Validadores

Si necesitas validar pero no transformar el valor, usa validadores nativos de Angular o personalizados en lugar de estas directivas.

// Validador (no transforma)
Validators.pattern('[0-9]{10}')

// Directiva (transforma el valor)
inputRegex="[0-9]"

Buenas Prácticas

1. Combina con maxlength: Limita la longitud del input para mejorar UX

   <input inputRegex="[0-9]" maxlength="10">

2. Usa placeholders descriptivos: Ayuda al usuario a entender el formato esperado

   <input inputRegex="[0-9]" placeholder="Solo números: 1234567890">

3. Feedback visual: Combina con validadores para mostrar errores

   formControl: ['', [Validators.required, Validators.pattern('[0-9]{10}')]]

4. Documenta el comportamiento: Si el comportamiento no es obvio, agrega un hint

   <input inputRegex="[a-z0-9_]">
   <small>Solo minúsculas, números y guión bajo</small>

5. Considera la accesibilidad: Usa type apropiado y inputmode para teclados móviles

   <input 
     type="tel" 
     inputmode="numeric"
     inputRegex="[0-9]"
   >