Saltar al contenido principal

Array Validators

Paquete: @tiendana/ngx-core/validators

Validadores para verificar la longitud de arrays en un FormControl: selecciones múltiples, etiquetas, adjuntos.

Características​

✅ minLengthArray y maxLengthArray como funciones ValidatorFn
✅ Clave de error configurable para mensajes específicos por contexto
✅ Payload con requiredLength y actualLength para mensajes dinámicos
✅ Un valor que no es array (null, undefined) es válido: no interfiere con Validators.required

import { minLengthArray, maxLengthArray } from '@tiendana/ngx-core/validators';

Validadores Disponibles​

minLengthArray​

Verifica que un array tenga un número mínimo de elementos.

function minLengthArray(min: number, errorKey: string = 'minLength'): ValidatorFn
ParámetroTipoDefaultDescripción
minnumber—Número mínimo de elementos
errorKeystring'minLength'Nombre de la clave del error

Error: { minLength: { requiredLength: number, actualLength: number } }

form = this.fb.group({
  tags: [[] as string[], minLengthArray(2)]
});

maxLengthArray​

Verifica que un array no exceda un número máximo de elementos.

function maxLengthArray(max: number, errorKey: string = 'maxLength'): ValidatorFn
ParámetroTipoDefaultDescripción
maxnumber—Número máximo de elementos
errorKeystring'maxLength'Nombre de la clave del error

Error: { maxLength: { requiredLength: number, actualLength: number } }

form = this.fb.group({
  tags: [[] as string[], maxLengthArray(10)]
});
Las claves llevan mayúscula

Las claves por defecto son minLength y maxLength (con L mayúscula), distintas de las de Angular, minlength y maxlength, que son las de Validators.minLength y Validators.maxLength para cadenas. Escribe tdnError="minLength" para estos validadores.

Valores que no son array

Si el valor es null, undefined o no es un array, el validador devuelve null (válido). Combínalo con Validators.required si el campo es obligatorio.

Ejemplos y Demos​

Los arrays se editan, por ejemplo, con tdn-input-tag. Los mensajes se muestran con el [tdnErrors] del control; ver Manejo de Errores.

Validación de Mínimo de Elementos​

Cargando demo...
Ver código

Validación de Máximo de Elementos​

Cargando demo...
Ver código

Validación de Rango (Mínimo y Máximo)​

Cargando demo...
Ver código

Error Key Personalizado​

Cargando demo...
Ver código

Casos de Uso Comunes​

Tags/Etiquetas​

tags: [[] as string[], [Validators.required, minLengthArray(1), maxLengthArray(20)]]

Selección Múltiple de Opciones​

selectedOptions: [[] as number[], minLengthArray(1, 'atLeastOne')]

Archivos Múltiples​

attachments: [[] as File[], [minLengthArray(1), maxLengthArray(5)]]

Combinación con Otros Validadores​

Con Validators.required​

Validators.required de Angular rechaza el array vacío ([]), igual que la cadena vacía. Lo que no hace es limitar la cantidad. Con [] fallan los dos a la vez (required y minLength), y se ven ambos mensajes. Para mostrar uno solo, condiciona el de minLength o usa solo minLengthArray.

tip

Con un valor null o undefined, minLengthArray no falla, ni siquiera minLengthArray(1). Si null es un estado posible del control, añade Validators.required para atraparlo.

Con Validadores Personalizados​

function uniqueValues(): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    const value = control.value;
    if (!Array.isArray(value)) return null;

    return new Set(value).size !== value.length ? { duplicates: true } : null;
  };
}

form = this.fb.group({
  items: [[] as string[], [minLengthArray(2), maxLengthArray(10), uniqueValues()]]
});

Estructura del Error​

Ambos validadores devuelven un objeto con el requisito y la longitud actual:

{ minLength: { requiredLength: 3, actualLength: 1 } }

{ maxLength: { requiredLength: 10, actualLength: 12 } }

Para un mensaje dinámico lee el error del bloque exportado con #errors="tdnErrors":

<div [tdnErrors]="'tags'" #errors="tdnErrors">
  <small tdnError="minLength">
    Se requieren al menos {{ errors.errors()?.['minLength']?.requiredLength }} elementos.
    Tienes {{ errors.errors()?.['minLength']?.actualLength }}.
  </small>
</div>

Notas Importantes​

  • Seguridad ante nulos: devuelven null (válido) si el valor no es un array.
  • Clave configurable: útil para mensajes más específicos según el contexto.
  • Vacío vs required: Validators.required ya rechaza []; minLengthArray(n) añade el mínimo.
  • Solo longitud: no inspeccionan el contenido de los elementos.
  • Síncronos: ambos son validadores síncronos.

Ver También​