Reactive Form Validation
Reactive forms give you fine-grained control over validation. You can set validators, check status, and react to changes.
Setting Validators
You can set validators when creating the form:
this.loginForm = new FormGroup({
email: new FormControl('', [Validators.required, Validators.email]),
password: new FormControl('', [Validators.required, Validators.minLength(6)])
});
Or using FormBuilder:
this.loginForm = this.fb.group({
email: ['', [Validators.required, Validators.email]],
password: ['', [Validators.required, Validators.minLength(6)]]
});
Dynamically Adding Validators
You can add or remove validators at runtime:
// Add a validator
this.loginForm.get('email').setValidators([Validators.required, Validators.email]);
this.loginForm.get('email').updateValueAndValidity();
// Clear validators
this.loginForm.get('email').clearValidators();
this.loginForm.get('email').updateValueAndValidity();
Form Status
Reactive forms provide several status properties:
valid– true if all controls are valid.invalid– true if any control is invalid.pending– true if async validation is running.disabled– true if form is disabled.enabled– true if form is enabled.
You can use these to disable the submit button, show loading indicators, etc.
Cross-Field Validation
Sometimes you need to validate multiple fields together (e.g., password and confirm password). You can add a validator at the FormGroup level.
import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';
export const passwordMatchValidator: ValidatorFn = (control: AbstractControl): ValidationErrors | null => {
const password = control.get('password');
const confirmPassword = control.get('confirmPassword');
return password && confirmPassword && password.value !== confirmPassword.value
? { passwordMismatch: true }
: null;
};
// Usage in component
this.registerForm = this.fb.group({
password: ['', Validators.required],
confirmPassword: ['', Validators.required]
}, { validators: passwordMatchValidator });
Then in the template, you can access the error:
<div *ngIf="registerForm.errors?.passwordMismatch && registerForm.get('confirmPassword').touched">
Passwords do not match.
</div>
Two Minute Drill
- Set validators when creating FormControl or using FormBuilder.
- Use updateValueAndValidity() after changing validators dynamically.
- Form status properties: valid, invalid, pending, disabled.
- Cross-field validation uses a validator on FormGroup.
- Access errors at group level with form.errors.
Need more clarification?
Drop us an email at career@quipoinfotech.com