Angular 38: Capstone del Módulo D — Un Feature de Formulario + Routing
easy⏱ 5 mincourseangular
Un validador personalizado: las comprobaciones cruzadas viven a nivel del grupo
Los validadores incorporados como Validators.required solo ven el valor de un único control. Para comparar dos campos hermanos — password y confirmPassword — escribes tu propia función simple con la forma ValidatorFn: (control: AbstractControl) => ValidationErrors | null, y la pasas como segundo argumento a fb.group({...}, { validators: passwordsMatchValidator }), para que se ejecute contra todo el grupo en lugar de un solo control.
function passwordsMatchValidator(group: AbstractControl): ValidationErrors | null {
const password = group.get('password')?.value;
const confirmPassword = group.get('confirmPassword')?.value;
return password === confirmPassword ? null : { passwordsMismatch: true };
}
Rastreando el estado de envío con un signal, no un campo de clase
Un submitting = signal(false) le da a la plantilla una bandera reactiva para deshabilitar el botón de envío y mostrar una etiqueta de carga, que se pone en true justo antes del trabajo asíncrono (simulado) y se usa puramente para retroalimentación de UI — no tiene nada que ver con el propio estado valid/invalid del formulario.
inject(Router).navigate(...): avanzando tras un envío exitoso
inject(Router) obtiene el servicio del router sin necesidad de un constructor; llamar a .navigate(['/success']) sobre él enruta la app programáticamente hacia la ruta /success — el mismo mecanismo que dispara un routerLink desde un click, solo que invocado desde código una vez que tu lógica de envío decide que el flujo terminó.
private router = inject(Router);
afterSuccess() {
this.router.navigate(['/success']);
}
Cómo esto escala más allá de un solo archivo
En un proyecto real, SignUpComponent, SuccessComponent, el passwordsMatchValidator, y el arreglo routes vivirían cada uno en su propio archivo, y provideRouter(routes) se registraría una vez en main.ts (o app.config.ts). Todo está combinado aquí puramente para que esta lección de un solo archivo pueda mostrar el feature completo — formulario, validación y routing — en un solo lugar.