Gestionar los estados deshabilitado y tocado
Reflejar el estado del formulario en su control
Gestionar los estados deshabilitado y tocado es una lección gratuita de Angular Academy en CoddyKit. Esta es la lección 3 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.
Más allá del valor
Un control personalizado completo respeta otros dos conceptos de los formularios: el estado deshabilitado y el estado tocado. Estos estados determinan la experiencia de usuario y la visualización de la validación.
setDisabledState
Angular llama a setDisabledState cuando el control del formulario se deshabilita o se habilita (por ejemplo, mediante control.disable()). Refleje este estado en su componente.
disabled = false;
setDisabledState(isDisabled: boolean): void {
this.disabled = isDisabled;
}Reflejar el estado deshabilitado en la vista
Utilice la marca disabled para aplicar estilos al control y bloquear la interacción, de modo que los usuarios no puedan cambiar un campo deshabilitado.
template: '<button [disabled]="disabled" (click)="select(s)">star</button>'Proteger los controladores
Proteja también los controladores de cambios para que la interacción programática o mediante el teclado no produzca ningún efecto mientras el control esté deshabilitado.
select(rating: number): void {
if (this.disabled) return;
this.value = rating;
this.onChange(rating);
}registerOnTouched
Angular proporciona una devolución de llamada para marcar el control como tocado. Guárdela igual que guardó onChange.
private onTouched: () => void = () => {};
registerOnTouched(fn: () => void): void {
this.onTouched = fn;
}Llamar a onTouched
Invoque la devolución de llamada de estado tocado cuando el usuario abandone el control, normalmente al producirse un desenfoque. Esto indica a Angular que el usuario ha interactuado y permite mostrar mensajes de validación basados en el estado tocado.
onBlur(): void {
this.onTouched();
}Por qué importa el estado tocado
La experiencia de usuario de la validación suele mostrar los errores solo después de que se haya tocado un campo. Si no llama a onTouched, control.touched permanece en false y los mensajes de error pueden no aparecer en el momento adecuado.
<small *ngIf="control.touched && control.invalid">Required</small>Conectar el desenfoque
Asocie el controlador de desenfoque en la plantilla para que abandonar el control lo marque como tocado.
template: '<div (blur)="onBlur()" tabindex="0">...</div>'Patrón de deshabilitación reactiva
Es preferible deshabilitar mediante la API del formulario (control.disable()) en lugar de usar un enlace de plantilla disabled, para que Angular controle setDisabledState de forma coherente.
this.form.get('stars')?.disable();Accesibilidad
Refleje de forma accesible los estados deshabilitado y de foco: establezca aria-disabled, gestione tabindex y asegúrese de que los usuarios del teclado puedan provocar un desenfoque para activar el estado tocado, manteniendo el control inclusivo.
Integración completa
Al gestionar el valor y los estados deshabilitado y tocado, su control se comporta como una entrada nativa tanto en formularios reactivos como en formularios controlados por plantilla. El último elemento es la validación.
Comprobación rápida
Compruebe sus conocimientos sobre los estados deshabilitado y tocado.
Resumen
Gestionó setDisabledState (reflejar y proteger contra el estado deshabilitado) y registerOnTouched (llamar al producirse un desenfoque para marcar el control como tocado y habilitar la experiencia de usuario de validación). Es preferible utilizar la API del formulario para controlar el estado deshabilitado y mantener el control accesible.
Preguntas frecuentes
¿La lección «Gestionar los estados deshabilitado y tocado» es gratis?
Sí — el texto completo de «Gestionar los estados deshabilitado y tocado» 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 «Gestionar los estados deshabilitado y tocado»?
Reflejar el estado del formulario en su control 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 3 de 4.
¿Cuánto tiempo toma la lección «Gestionar los estados deshabilitado y tocado»?
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