UNPKG

@gdimx/ngx-input-validator

Version:

Libreriía de validaciones reutilizables para formularios en angular

106 lines (75 loc) 3.4 kB
# ngx-input-validator Librería ligera y extensible de validaciones personalizadas para formularios reactivos en Angular y proyectos TypeScript. Compatible con validaciones comunes como correo electrónico, RFC, CURP, campos alfanuméricos, sin espacios, y más. ## Instalación ```bash npm install ngx-input-validator ``` > Si estás usando esta clase manualmente dentro de tu proyecto (sin publicación), simplemente colócala en tu carpeta `src/app/validators/` y haz el import correspondiente. --- ## Uso Básico Importa la clase `NgxInputValidator` en tu componente: ```ts import { NgxInputValidator } from 'src/app/validators/ngx-input-validator'; ``` Y úsala al crear tu `FormGroup`: ```ts this.form = this.fb.group({ nombre: ['', [NgxInputValidator.required, NgxInputValidator.alpha]], email: ['', [NgxInputValidator.email]], rfc: ['', [NgxInputValidator.rfc]], curp: ['', [NgxInputValidator.curp]], edad: ['', [NgxInputValidator.numeric, NgxInputValidator.minLength(2)]], }); ``` --- ## Ejemplo en HTML ```html <mat-form-field> <input matInput placeholder="Correo electrónico" formControlName="email" /> <mat-error *ngIf="form.get('email')?.invalid"> {{ NgxInputValidator.getErrorMessage(form.get('email')) }} </mat-error> </mat-form-field> ``` --- ## Validaciones disponibles | Método | Descripción | |-------------------------------|----------------------------------------------| | `required` | Campo obligatorio | | `email` | Validación de correo electrónico | | `alpha` | Solo letras (incluye acentos y ñ) | | `alphaNumeric` | Solo letras y números | | `numeric` | Solo números | | `decimal` | Números decimales válidos | | `minLength(n)` | Longitud mínima de caracteres | | `maxLength(n)` | Longitud máxima de caracteres | | `noSpaces` | No permite espacios | | `onlyUppercase` | Solo mayúsculas | | `onlyLowercase` | Solo minúsculas | | `rfc` | Validación de RFC mexicano | | `curp` | Validación de CURP mexicano | | `allowedCharacters(regex)` | Solo permite ciertos caracteres | | `disallowedCharacters(regex)` | Prohíbe ciertos caracteres | --- ## Mensaje de error automático ```ts NgxInputValidator.getErrorMessage(form.get('nombre')); ``` --- ## Mostrar todos los errores del formulario ```ts NgxInputValidator.getAllFormErrors(form); ``` Devuelve un `string` con errores como: ``` Este campo es obligatorio RFC inválido Solo letras permitidas ``` Ideal para mostrar resumen de errores con `Swal.fire`, `mat-card`, etc. --- ## Personalización Puedes extender fácilmente la clase agregando tus propios validadores o personalizando los mensajes en `getErrorMessage`. --- ## Licencia MIT