AngularJS provides several built-in directives and features for validating user input in forms. Here are some ways to validate user input in AngularJS forms:
1. Using ng-model and ng-required directives: You can use the ng-model directive to bind form inputs to a model variable and the ng-required directive to specify whether a field is required or not. For example:
html
<form name="myForm">
<input type="text" ng-model="name" ng-required="true">
<span ng-show="myForm.name.$error.required">Name is required.</span>
</form>
2. Using ng-pattern directive: You can use the ng-pattern directive to specify a regular expression pattern that the input value must match. For example, to validate an email address:
html
<form name="myForm">
<input type="email" ng-model="email" ng-pattern="/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}$/">
<span ng-show="myForm.email.$error.pattern">Invalid email address.</span>
</form>
3. Using ng-minlength and ng-maxlength directives: You can use the ng-minlength and ng-maxlength directives to specify the minimum and maximum length of an input value. For example:
html
<form name="myForm">
<input type="text" ng-model="password" ng-minlength="6" ng-maxlength="10">
<span ng-show="myForm.password.$error.minlength">Password is too short.</span>
<span ng-show="myForm.password.$error.maxlength">Password is too long.</span>
</form>
4. Using custom validation directives: You can create custom validation directives to implement complex validation logic. For example, you can create a directive to validate that two password fields match:
html
<form name="myForm">
<input type="password" ng-model="password1">
<input type="password" ng-model="password2" match-password="password1">
<span ng-show="myForm.password2.$error.matchPassword">Passwords do not match.</span>
</form>
javascript
app.directive(‘matchPassword’, function() {
return {
require: ‘ngModel’,
link: function(scope, element, attrs, ctrl) {
ctrl.$validators.matchPassword = function(modelValue, viewValue) {
var password = scope.$eval(attrs.matchPassword);
return viewValue === password;
};
}
};
});
These are just a few examples of how you can validate user input in AngularJS forms. AngularJS provides many more built-in directives and features for form validation, such as ng-min, ng-max, ng-pattern, etc. You can also create custom validation directives to implement your own validation logic.