Validación en controles personalizados
Proporcionar validadores desde controles personalizados
Validación en controles personalizados es una lección gratuita de Angular Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Angular Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Angular Academy incluye 4 lecciones en total.
Controles con validación propia
Un control personalizado puede incluir su propia lógica de validación implementando la interfaz Validator y registrándose con NG_VALIDATORS, para que los consumidores obtengan el estado de validez automáticamente.
La interfaz Validator
Validator requiere un método validate que devuelva ValidationErrors (un mapa de errores) o null cuando el valor sea válido.
import { Validator, ValidationErrors, AbstractControl } from '@angular/forms';
export class RatingComponent implements Validator {
validate(control: AbstractControl): ValidationErrors | null {
return control.value > 0 ? null : { required: true };
}
}Registrar NG_VALIDATORS
Añada un segundo proveedor múltiple para NG_VALIDATORS junto a NG_VALUE_ACCESSOR, utilizando de nuevo forwardRef.
import { NG_VALIDATORS } from '@angular/forms';
providers: [
{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => RatingComponent), multi: true },
{ provide: NG_VALIDATORS, useExisting: forwardRef(() => RatingComponent), multi: true }
]Devolver mapas de errores
Las claves del mapa de errores se convierten en entradas de control.errors. Utilice claves descriptivas y datos opcionales para que las plantillas puedan mostrar mensajes específicos.
validate(control: AbstractControl): ValidationErrors | null {
const v = control.value;
if (v == null) return { required: true };
if (v < this.min) return { min: { required: this.min, actual: v } };
return null;
}Consumir errores
Las plantillas leen control.errors igual que con los validadores integrados y muestran mensajes cuando el control no es válido y está tocado.
<small *ngIf="form.controls.stars.errors?.['required']">Pick a rating</small>Combinar con validadores externos
Se ejecutan y combinan tanto los validadores del control como los que proporciona el consumidor en el formulario reactivo. Las reglas del control se añaden a las del formulario, no las reemplazan.
stars: [0, [Validators.required]] // plus the control's own validate()Validación dinámica
Si la validación depende de una entrada que cambia, llame a la devolución de llamada de cambios registrada para indicar a Angular que vuelva a ejecutar la validación.
private onValidatorChange: () => void = () => {};
registerOnValidatorChange(fn: () => void) { this.onValidatorChange = fn; }
@Input() set min(v: number) { this._min = v; this.onValidatorChange(); }Validación asíncrona
Para las comprobaciones en el servidor, implemente AsyncValidator con un método validate que devuelva un Observable o una Promise de errores, y regístrelo con NG_ASYNC_VALIDATORS.
validate(control: AbstractControl): Observable<ValidationErrors | null> {
return this.api.isUnique(control.value).pipe(
map(ok => ok ? null : { taken: true })
);
}Mantener el enfoque
Incluya dentro del control únicamente la validación que le sea intrínseca (por ejemplo, una valoración debe ser mayor que cero). Deje las reglas específicas del negocio al formulario consumidor para favorecer la reutilización.
Probar la validación
Pruebe validate directamente mediante una prueba unitaria: pase un control simulado con un valor y compruebe el mapa de errores devuelto o null.
it('requires a rating', () => {
const c = new FormControl(0);
expect(component.validate(c)).toEqual({ required: true });
});Control personalizado completo
Al implementar el acceso al valor y la gestión de los estados deshabilitado y tocado, además de la validación, su componente se convierte en un control de formulario completo y reutilizable, indistinguible de las entradas nativas para los consumidores.
Comprobación rápida
Compruebe sus conocimientos sobre la validación.
Resumen
Añadió la validación implementando Validator.validate, registrando NG_VALIDATORS, devolviendo mapas de errores y admitiendo la revalidación dinámica mediante registerOnValidatorChange, además de AsyncValidator con NG_ASYNC_VALIDATORS de forma opcional, para crear un control personalizado totalmente integrado.
Preguntas frecuentes
¿La lección «Validación en controles personalizados» es gratis?
Sí — el texto completo de «Validación en controles personalizados» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Angular Academy, actualiza a CoddyKit PRO. El curso de Angular Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Validación en controles personalizados»?
Proporcionar validadores desde controles personalizados Practicas Angular Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Angular Academy?
No se requiere experiencia previa. Angular Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Validación en controles personalizados»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Angular Academy?
Sí. Cada lección de Angular Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- La interfaz ControlValueAccessor
- Escribir y registrar valores
- Gestionar los estados deshabilitado y tocado
- Validación en controles personalizados