Form Validation using Built-in and Custom Validators in AngularJS

Form validation is an essential aspect of any web application, as it ensures that the data entered by the user is accurate and meets the specified requirements. AngularJS provides developers with powerful tools for form validation, including built-in validators and the ability to create custom validators.

Built-in Validators

AngularJS comes with a set of built-in validators that can be easily used to validate form inputs. These validators are part of the ngModel directive and can be applied to input elements using the ng- prefix.

Some of the commonly used built-in validators are:

• required: Ensures that the input field is not empty.
• pattern: Validates the input against a regular expression.
• min and max: Specifies the minimum and maximum values allowed for numerical inputs.
• email: Checks if the input is a valid email address.

To apply a built-in validator, you need to add the corresponding attribute to your HTML input element and bind it to the ngModel directive. For example, to make an input field required, you can use the ng-required attribute:

<input type="text" ng-model="name" ng-required="true">

Custom Validators

In addition to the built-in validators, AngularJS allows you to create your own custom validators based on your specific validation requirements.

To create a custom validator, you need to define a function that takes the ngModel value as an argument and returns either true or false based on the validation result. The function should be added to the AngularJS module as a directive using the module.directive method.

Here's an example of a custom validator that checks if a password contains both letters and numbers:

angular.module('myApp', [])
.directive('passwordValidator', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attributes, ngModel) {
      ngModel.$validators.passwordValidator = function(modelValue, viewValue) {
        var value = modelValue || viewValue;
        return /[a-zA-Z]+/.test(value) && /[0-9]+/.test(value);
      };
    }
  };
});

Once the custom validator is defined, it can be applied to an input field by adding the corresponding attribute and binding it to the directive:

<input type="password" ng-model="password" password-validator>

Displaying Validation Errors

AngularJS provides various ways to display validation errors to the user. You can make use of the $error object, which is attached to the ngModel controller, to determine the state of the input field.

For example, to display an error message when a required field is left empty, you can use the following code:

<input type="text" ng-model="name" ng-required="true">
<p ng-show="myForm.name.$error.required">Name is required.</p>

In this example, the ng-show directive is used to conditionally display the error message based on the $error.required property of the myForm.name object.

Conclusion

Form validation is a crucial part of building robust web applications, and AngularJS provides developers with powerful tools to achieve this. By using the built-in validators, you can quickly implement basic validations, such as required fields and pattern matching. Furthermore, the ability to create custom validators gives you the flexibility to implement more complex validations based on your specific requirements.