NgxInputValidator

Utilidades de validación sin dependencias para Angular: validadores sincrónicos reutilizables (RFC, CURP, email, solo letras, alfanumérico, etc.), más utilidades para mensajes de error centralizados.

Compatible con Reactive Forms y usable en Template-Driven Forms (con funciones personalizadas).

Características

• Validadores listos para usar (required, email, alpha, alphaNumeric, numeric, decimal, rfc, curp, etc.)
• Validadores parametrizables (minLength, maxLength, allowedCharacters, disallowedCharacters)
• Funciones auxiliares para mensajes de error por control (getErrorMessage) y resumen del formulario (getAllFormErrors)
• Reglas de mayúsculas/minúsculas y espacios (onlyUppercase, onlyLowercase, noSpaces)
• Expresiones para RFC y CURP (incluye XEXX y NE)

Instalación

1. Coloca el archivo NgxInputValidator.ts en tu proyecto, por ejemplo:

   npm i @gdimx/ngx-input-validator

2. Importa la clase donde la necesites:

   import { NgxInputValidator } from 'node_modules/@gdimx/NgxInputValidator';

No requiere providers ni módulos adicionales.

Uso en Reactive Forms

import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { NgxInputValidator } from 'src/app/shared/validators/NgxInputValidator';

@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html'
})
export class DemoComponent {
  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      nombre: ['', [
        NgxInputValidator.required,
        NgxInputValidator.alpha,
        NgxInputValidator.minLength(3),
        NgxInputValidator.maxLength(60),
      ]],
      correo: ['', [NgxInputValidator.required, NgxInputValidator.email]],
      rfc: ['', [NgxInputValidator.rfc]],
      curp: ['', [NgxInputValidator.curp]],
      codigo: ['', [
        NgxInputValidator.allowedCharacters(/^[A-Z0-9-]*$/),
        NgxInputValidator.onlyUppercase
      ]],
      cantidad: ['', [NgxInputValidator.decimal]]
    });
  }

  getError(ctrlName: string): string {
    const ctrl = this.form.get(ctrlName);
    return NgxInputValidator.getErrorMessage(ctrl);
  }
}

Template (Angular Material):

<mat-form-field appearance="outline">
  <mat-label>Correo</mat-label>
  <input matInput formControlName="correo" />
  <mat-error *ngIf="form.get('correo')?.invalid">
    {{ getError('correo') }}
  </mat-error>
</mat-form-field>

Ejemplos de Cada Validador

1. required

this.fb.control('', [NgxInputValidator.required]);

'' → error { required: true } → No válido 'texto' → válido

2. email

this.fb.control('', [NgxInputValidator.email]);

'correo@' → { email: true } → No válido '[email protected]' → válido

3. alpha

this.fb.control('', [NgxInputValidator.alpha]);

'123' → { alpha: true } → No válido 'José Pérez' → válido

4. alphaNumeric

this.fb.control('', [NgxInputValidator.alphaNumeric]);

'abc@123' → { alphaNumeric: true } → No válido 'abc123' → válido

5. numeric

this.fb.control('', [NgxInputValidator.numeric]);

'12a' → { numeric: true } → No válido '12345' → válido

6. decimal

this.fb.control('', [NgxInputValidator.decimal]);

'abc' → { decimal: true } → No válido '123.45' → válido

7. minLength y maxLength

this.fb.control('', [NgxInputValidator.minLength(3), NgxInputValidator.maxLength(5)]);

'ab' → { minLength: { requiredLength: 3 } } → No válido 'abcdef' → { maxLength: { requiredLength: 5 } } → No válido 'abcd' → válido

8. allowedCharacters

this.fb.control('', [NgxInputValidator.allowedCharacters(/^[A-Z0-9-]*$/)]);

'abc' → { invalidCharacters: true } → No válido 'ABC-123' → válido

9. disallowedCharacters

this.fb.control('', [NgxInputValidator.disallowedCharacters(/[!@#$%^&*]/)]);

'clave@123' → { forbiddenCharacters: true } → No válido 'clave123' → válido

10. noSpaces

this.fb.control('', [NgxInputValidator.noSpaces]);

'con espacio' → { noSpaces: true } → No válido 'sin_espacio' → válido

11. onlyUppercase

this.fb.control('', [NgxInputValidator.onlyUppercase]);

'abc' → { onlyUppercase: true } → No válido 'ABC123' → válido

12. onlyLowercase

this.fb.control('', [NgxInputValidator.onlyLowercase]);

'ABC' → { onlyLowercase: true } → No válido 'abc123' → válido

13. rfc

this.fb.control('', [NgxInputValidator.rfc]);

'X' → { rfc: true } → No válido 'ABC010101XXX' → válido

14. curp

this.fb.control('', [NgxInputValidator.curp]);

'Z' → { curp: true } → No válido 'CUPU800825HDFABC09' → válido
'XEXX010101HNEXXXA4' → válido (extranjeros)

Mensajes de Error

Por control

NgxInputValidator.getErrorMessage(control: AbstractControl): string

De todo el formulario

NgxInputValidator.getAllFormErrors(form: FormGroup): string

Ejemplo:

const resumen = NgxInputValidator.getAllFormErrors(this.form);
alert(resumen);

Salida:

• Este campo es obligatorio
• RFC inválido

Pruebas Unitarias (Jasmine + Karma)

import { NgxInputValidator } from './NgxInputValidator';

describe('NgxInputValidator', () => {
  const c = (v: any) => ({ value: v });

  it('valida required', () => {
    expect(NgxInputValidator.required(c('texto'))).toBeNull();
    expect(NgxInputValidator.required(c(''))).toEqual({ required: true });
  });

  it('valida email', () => {
    expect(NgxInputValidator.email(c('[email protected]'))).toBeNull();
    expect(NgxInputValidator.email(c('mal'))).toEqual({ email: true });
  });

  it('valida RFC', () => {
    expect(NgxInputValidator.rfc(c('ABC010101XXX'))).toBeNull();
    expect(NgxInputValidator.rfc(c('X'))).toEqual({ rfc: true });
  });
});

Licencia

MIT.