Angular Form Validation forms को reliable, secure और user-friendly बनाने का सबसे important part है। Validation ensure करती है कि user सही format और correct data enter करे, इससे पहले कि form submit हो या backend को data भेजा जाए। Angular में validation Reactive Forms और Template-Driven Forms दोनों में supported है, लेकिन production-grade applications में Reactive Forms ज्यादा preferred होती हैं।
इस chapter में हम Angular Form Validation को complete depth में समझेंगे, built-in validators से लेकर real-world validation patterns तक।
Form Validation का Purpose
Form validation का goal सिर्फ error दिखाना नहीं है, बल्कि:
- Invalid data submit होने से रोकना
- User को clear feedback देना
- Backend errors reduce करना
- Application consistency maintain करना
Strong validation UX और data integrity दोनों improve करती है।
Angular Validation Types
Angular forms में validation दो level पर होती है:
- Control-level validation
- Form-level (group-level) validation
और दो nature की validation होती है:
- Synchronous validation
- Asynchronous validation
Built-in Validators Overview
Angular Validators class built-in validators provide करती है।
Common validators:
- Validators.required
- Validators.minLength
- Validators.maxLength
- Validators.min
- Validators.max
- Validators.email
- Validators.pattern
ये validators most common use cases cover करते हैं।
Reactive Form Validation Example
this.form = this.fb.group({
email: ['', [Validators.required, Validators.email]],
password: ['', [Validators.required, Validators.minLength(6)]]
});
यह validation form creation के time define होती है।
Validation State Properties
Har FormControl कुछ important state properties maintain करता है।
- valid / invalid
- touched / untouched
- dirty / pristine
- errors
Example:
this.form.get('email')?.invalid
UI logic इन्हीं states पर depend करती है।
Template में Validation Check करना
<input formControlName="email">
<div *ngIf="form.get('email')?.invalid && form.get('email')?.touched">
Invalid Email
</div>
touched या dirty check करना जरूरी है ताकि error prematurely show न हो।
errors Object को समझना
जब control invalid होता है, Angular errors object attach करता है।
form.get('email')?.errors
Possible output:
{
required: true,
email: true
}
यह object multiple validation failures handle करता है।
Custom Error Messages Strategy
Hard-coded error messages avoid करना चाहिए।
Better approach:
<div *ngIf="control.errors?.required">
Field is required
</div>
<div *ngIf="control.errors?.email">
Invalid email format
</div>
यह scalable और maintainable approach है।
Form-Level Validation
Kabhi-kabhi validation multiple fields पर depend करती है।
Example: password match
this.form = this.fb.group(
{
password: [''],
confirm: ['']
},
{
validators: this.passwordMatch
}
);
passwordMatch(group: AbstractControl) {
const p1 = group.get('password')?.value;
const p2 = group.get('confirm')?.value;
return p1 === p2 ? null : { mismatch: true };
}
यह cross-field validation कहलाती है।
Validators Composition
Multiple validators ek saath use ho sakte hain।
Validators.compose([
Validators.required,
Validators.minLength(8)
])
Usually array syntax preferred होती है।
Runtime Validation Update
Validation runtime पर change की जा सकती है।
const control = this.form.get('email');
control?.setValidators([Validators.required]);
control?.updateValueAndValidity();
updateValueAndValidity() call करना mandatory है।
Conditional Validation
Business rules के basis पर validation apply करना common है।
this.form.get('userType')?.valueChanges.subscribe(type => {
if (type === 'admin') {
this.form.get('code')?.setValidators(Validators.required);
} else {
this.form.get('code')?.clearValidators();
}
this.form.get('code')?.updateValueAndValidity();
});
यह role-based forms में widely used pattern है।
Async Validation Introduction
Async validation server-side checks के लिए use होती है।
Example use cases:
- Username availability
- Email uniqueness
- Coupon validation
Async validators Observable return करते हैं।
emailTaken(control: AbstractControl) {
return this.http.get(`/check/${control.value}`).pipe(
map(res => res ? { emailTaken: true } : null)
);
}
Async validators next chapter में deep में cover होंगे।
Validation Timing Control
Angular validation trigger होती है:
- value change पर
- blur पर
- submit पर
Control करने के लिए:
new FormControl('', { updateOn: 'blur' })
Options:
- change (default)
- blur
- submit
Large forms में performance improve होती है।
Disable Controls and Validation
Disabled controls validation से exclude हो जाते हैं।
this.form.get('email')?.disable();
Re-enable:
this.form.get('email')?.enable();
Disabled controls form value में include नहीं होते।
Validation UX Best Practices
Good UX के लिए:
- Errors तभी दिखाओ जब user interact करे
- Clear और short messages use करो
- Field focus ke paas error दिखाओ
- Submit पर summary दिखा सकते हो
Validation UX conversion rate को impact करती है।
Form Submission Validation
Submit से पहले always validation check करें।
onSubmit() {
if (this.form.invalid) {
this.form.markAllAsTouched();
return;
}
// submit logic
}
markAllAsTouched() UX improvement के लिए important है।
Validation और Accessibility
Accessible validation जरूरी है।
- Screen readers के लिए error text
- Proper aria attributes
- Input-error association
Angular validation accessibility-friendly structure support करता है।
Common Validation Mistakes
- Template में heavy validation logic
- updateValueAndValidity() भूल जाना
- Hard-coded messages
- Component में business validation डालना
Validation logic structured और centralized होना चाहिए।
Real-World Validation Scenarios
Angular Form Validation heavily use होती है:
- Authentication forms
- Payment forms
- Enterprise workflows
- Admin panels
Strong validation application reliability का foundation है।
Angular Form Validation forms को production-ready बनाने का essential step है। अगला chapter होगा “Angular Custom Validators”, जहाँ हम reusable और complex validation logic create करना सीखेंगे।