implementing Form Validation in Angular Reactive Forms - Errors Not Displaying Properly
I'm following best practices but I've tried everything I can think of but I'm dealing with Hey everyone, I'm running into an issue that's driving me crazy. I'm having a tough time with validating a reactive form in Angular. I have a registration form that includes fields for email, password, and confirm password. I want to validate that the password and confirm password fields match, but I'm running into an scenario where the behavior message isn't displaying correctly. I am using Angular 14 and Reactive Forms. Here's a snippet of my form setup: ```typescript import { Component, OnInit } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; @Component({ selector: 'app-registration', templateUrl: './registration.component.html', }) export class RegistrationComponent implements OnInit { registrationForm: FormGroup; constructor(private fb: FormBuilder) { this.registrationForm = this.fb.group({ email: ['', [Validators.required, Validators.email]], password: ['', [Validators.required, Validators.minLength(6)]], confirmPassword: ['', [Validators.required]], }); } ngOnInit() { this.registrationForm.get('confirmPassword')?.setValidators([ Validators.required, this.passwordMatchValidator.bind(this), ]); } passwordMatchValidator(control: AbstractControl) { const password = this.registrationForm.get('password')?.value; return control.value === password ? null : { mismatch: true }; } onSubmit() { if (this.registrationForm.invalid) { this.registrationForm.markAllAsTouched(); return; } // Handle form submission } } ``` In my template, I'm checking for errors like this: ```html <form [formGroup]="registrationForm" (ngSubmit)="onSubmit()"> <input formControlName="email" /> <div *ngIf="registrationForm.get('email')?.invalid && registrationForm.get('email')?.touched"> Email is required and must be valid. </div> <input formControlName="password" type="password" /> <div *ngIf="registrationForm.get('password')?.invalid && registrationForm.get('password')?.touched"> Password is required and must be at least 6 characters long. </div> <input formControlName="confirmPassword" type="password" /> <div *ngIf="registrationForm.get('confirmPassword')?.errors?.mismatch && registrationForm.get('confirmPassword')?.touched"> Passwords do not match. </div> <button type="submit">Register</button> </form> ``` The question is that the behavior message for the confirm password field isn’t displaying at all even when the passwords don’t match. I've added a console log in the `passwordMatchValidator` to check if it's being called, and it is, but the behavior seems to not propagate correctly to the template. I've also tried calling `updateValueAndValidity()` after setting the validators, but it didn't help. Could anyone shed some light on what might be going wrong? Thanks in advance! This is part of a larger CLI tool I'm building. Has anyone else encountered this? I recently upgraded to Typescript stable. I'd really appreciate any guidance on this. The project is a REST API built with Typescript. For context: I'm using Typescript on Ubuntu 22.04. Any ideas what could be causing this?