Form validation is crucial in AngularJS applications to ensure data integrity and a better user experience. Below are the best practices for form validation, covering built-in directives, custom validation, error handling, and performance optimization.
1. Use Built-in AngularJS Validation Directives
AngularJS provides built-in directives to handle form validation efficiently.
Commonly Used Directives
| Directive | Purpose |
|---|---|
required | Ensures field is not empty |
ng-minlength | Sets minimum character length |
ng-maxlength | Sets maximum character length |
ng-pattern | Validates input against a regex pattern |
type="email" | Ensures valid email format |
type="number" | Ensures numeric input |
ng-required | Conditionally sets required fields |
Example
<form name="myForm" novalidate>
<label>Email:</label>
<input type="email" name="email" ng-model="user.email" required>
<p ng-show="myForm.email.$error.required">Email is required.</p>
<p ng-show="myForm.email.$error.email">Invalid email format.</p>
<button type="submit" ng-disabled="myForm.$invalid">Submit</button>
</form>
2. Use $dirty, $pristine, $valid, and $invalid for Validation States
AngularJS provides useful properties for form control states.
| Property | Description |
|---|---|
$dirty | Field has been modified |
$pristine | Field has not been touched |
$valid | Field meets validation criteria |
$invalid | Field does not meet validation criteria |
Example
<input type="text" name="username" ng-model="user.username" required>
<p ng-show="myForm.username.$dirty && myForm.username.$invalid">Invalid input!</p>
3. Use ng-messages for Better Error Handling
Instead of multiple ng-show statements, use ng-messages for cleaner code.
Example
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-messages/1.8.3/angular-messages.min.js"></script>
<form name="userForm" novalidate>
<label>Username:</label>
<input type="text" name="username" ng-model="user.username" required ng-minlength="5">
<div ng-messages="userForm.username.$error" ng-show="userForm.username.$dirty">
<p ng-message="required">Username is required.</p>
<p ng-message="minlength">Username must be at least 5 characters long.</p>
</div>
</form>
4. Create Reusable Validation Directives
For complex validation logic, use a custom directive instead of adding validation logic inside controllers.
Example: Custom Directive for Password Strength
app.directive('passwordStrength', function() {
return {
require: 'ngModel',
link: function(scope, element, attrs, ngModel) {
ngModel.$validators.passwordStrength = function(value) {
return /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}$/.test(value);
};
}
};
});
Usage
<input type="password" name="password" ng-model="user.password" password-strength required>
<p ng-show="userForm.password.$error.passwordStrength">Password must contain uppercase, lowercase, and a number.</p>
5. Implement Async Validation (e.g., Checking Username Availability)
If validation depends on server data, use $asyncValidators.
Example: Checking Username Availability
app.directive('checkUsername', function($q, $timeout) {
return {
require: 'ngModel',
link: function(scope, element, attrs, ngModel) {
ngModel.$asyncValidators.usernameTaken = function(value) {
var deferred = $q.defer();
$timeout(function() {
var takenUsernames = ['admin', 'testuser'];
takenUsernames.includes(value) ? deferred.reject() : deferred.resolve();
}, 1000);
return deferred.promise;
};
}
};
});
Usage
<input type="text" name="username" ng-model="user.username" check-username required>
<p ng-show="userForm.username.$pending.usernameTaken">Checking availability...</p>
<p ng-show="userForm.username.$error.usernameTaken">Username is taken.</p>
6. Disable Submit Button Based on Validation Status
Prevent submission if the form is invalid.
Example
<button type="submit" ng-disabled="myForm.$invalid">Submit</button>
7. Conditional Validations Based on Other Fields
Use ng-required or a directive to enable validation dynamically.
Example
<input type="checkbox" ng-model="agree">
<input type="text" name="details" ng-model="user.details" ng-required="agree">
<p ng-show="userForm.details.$error.required">Details are required if checked.</p>
8. Validate Multiple Fields Dynamically
Create a directive that validates multiple fields at once.
Example: Match Password Validation
app.directive('matchPassword', function() {
return {
require: 'ngModel',
scope: {
otherModelValue: "=matchPassword"
},
link: function(scope, element, attrs, ngModel) {
ngModel.$validators.matchPassword = function(value) {
return value === scope.otherModelValue;
};
}
};
});
Usage
<input type="password" ng-model="user.password">
<input type="password" ng-model="user.confirmPassword" match-password="user.password">
<p ng-show="userForm.confirmPassword.$error.matchPassword">Passwords do not match.</p>
9. Performance Optimization Tips
✔ Use ng-model-options to debounce inputs (reduces unnecessary validations).
✔ Use track by in ng-repeat to avoid re-rendering of elements.
✔ Avoid filters inside templates, instead apply filters inside controllers.
✔ Use $asyncValidators only when necessary to avoid frequent API calls.
Example: Using ng-model-options for Debouncing
<input type="text" ng-model="searchQuery" ng-model-options="{ debounce: 500 }">
This will delay validation by 500ms to avoid unnecessary API requests.
10. Summary of Best Practices
| Best Practice | Benefit |
|---|---|
| Use built-in validation directives | Reduces code complexity |
Use $dirty, $pristine, $valid, $invalid | Provides better UI feedback |
Use ng-messages | Simplifies error messages |
| Create reusable validation directives | Avoids repetitive code |
| Implement async validation | Supports real-time server-side checks |
| Disable submit button conditionally | Prevents invalid submissions |
Use ng-required for conditional validation | Enhances dynamic forms |
| Optimize performance | Improves user experience |