Validadores - Resumen

Paquete: @tiendana/ngx-core/validators

Los validadores de @tiendana/ngx-core/validators extienden la validación de Angular con funciones para casos de uso comunes: comparar campos, validar archivos, comprobar unicidad en el servidor y limitar arreglos. Se muestran en pantalla con el sistema de manejo de errores.

Características

✅ Validadores de comparación entre campos
✅ Validación de archivos por tamaño, extensión y cabecera binaria
✅ Validación remota con debounce de 1 segundo
✅ Validadores para arrays con clave de error configurable
✅ Utilidades RxJS para lectura de archivos
✅ NIT colombiano con dígito de verificación

Qué Exporta el Paquete

El entry point exporta exactamente tres módulos:

Módulo	Exporta
custom-validators	CustomValidators
file-read	readAsArrayBuffer, readAsDataURL, getFileType, urlToDataUrl, urlImageToFile, sanitizeFileName
array	minLengthArray, maxLengthArray

BaseValidationModel no se importa

alreadyExist recibe un objeto con la forma de BaseValidationModel, pero ese tipo no está exportado por el paquete. Escribe el objeto en línea ({ Model: 'Product', Field: 'sku', Id: null }) y TypeScript lo comprueba contra la firma.

Paquetes Disponibles

CustomValidators

Clase de métodos estáticos:

• Comparación de campos: match, lowerThan, lowerOrEqualThan, greaterThan, greaterOrEqualThan, betweenRange
• Fechas: dateLowerThan, dateGreaterThan
• Archivos: maxFileSize, minFileSize, fileType, requiredFileType
• Remota: alreadyExist (comprueba la existencia mediante una petición HTTP)
• NIT: verifyNIT (NIT colombiano con dígito de verificación)

Ver documentación completa →

Array Validators

• minLengthArray: mínimo número de elementos
• maxLengthArray: máximo número de elementos

Ver documentación completa →

File Read Utilities

• readAsArrayBuffer: lee un archivo como ArrayBuffer
• readAsDataURL: lee un archivo como Data URL (base64)
• getFileType: obtiene el tipo de archivo desde su cabecera (sin detectar SVG ni ZIP, ver su página)
• urlToDataUrl: convierte la URL de una imagen a base64
• urlImageToFile: convierte la URL de una imagen a File
• sanitizeFileName: deja solo letras, dígitos, espacios, guiones y guiones bajos

Ver documentación completa →

Instalación

npm install @tiendana/ngx-core

Requiere @angular/core 19 o superior y @tiendana/utils 0.4.0 o superior. alreadyExist usa HttpClient.

Dónde se Aplica Cada Validador

Tipo	Se aplica en	Dónde queda el error
match, comparaciones, fechas	FormGroup	En el control destino, no en el grupo
maxFileSize, minFileSize, fileType, verifyNIT	FormControl	En ese control
requiredFileType, alreadyExist (asíncronos)	FormControl (asyncValidators)	En ese control
minLengthArray, maxLengthArray	FormControl	En ese control

Los validadores de grupo escriben su error con setErrors en el control destino y devuelven null desde el grupo. Por eso el mensaje se muestra con el [tdnErrors] de ese control (<div [tdnErrors]="'confirmPassword'">).

Uso Básico

Validadores Síncronos

import { CustomValidators } from '@tiendana/ngx-core/validators';

form = this.fb.group({
  password: ['', Validators.required],
  confirmPassword: ['']
}, {
  validators: [CustomValidators.match('password', 'confirmPassword')]
});

<tdn-form-element>
  <label for="confirm">Confirmar contraseña</label>
  <input id="confirm" type="password" formControlName="confirmPassword" tdnControl />
  <div [tdnErrors]="'confirmPassword'">
    <span tdnError="match">Las contraseñas no coinciden</span>
  </div>
</tdn-form-element>

Validadores Asíncronos

import { CustomValidators } from '@tiendana/ngx-core/validators';
import { HttpClient } from '@angular/common/http';

private readonly http = inject(HttpClient);

form = this.fb.group({
  email: ['', {
    validators: [Validators.required, Validators.email],
    asyncValidators: [
      CustomValidators.alreadyExist(this.http, '/api/validate', { Model: 'User', Field: 'email' })
    ]
  }]
});

Contrato del endpoint de alreadyExist

Cualquier respuesta 2xx significa "ya existe" (error alreadyExist). Cualquier error HTTP significa "disponible" (válido). Diseña el endpoint para responder 404 cuando el valor no existe.

File Read Utilities

import { readAsDataURL } from '@tiendana/ngx-core/validators';

onFileSelect(event: Event) {
  const file = (event.target as HTMLInputElement).files?.[0];
  if (file) {
    readAsDataURL(file).subscribe(base64 => {
      console.log('Base64:', base64);
    });
  }
}

Ver También

• Manejo de Errores: cómo mostrar los errores de estos validadores
• calculateDv: cálculo del dígito de verificación de un NIT en @tiendana/utils