Previous

AngularJS Validation

AngularJS Validation ensures that the data entered in forms meets predefined criteria. It provides built-in validation rules, custom validators, and dynamic error handling, enabling developers to create robust and user-friendly forms.

Key Features of AngularJS Validation

  1. Real-Time Validation: Validates fields as users interact with the form.
  2. Built-In Validators: Offers default rules like required, email, and pattern.
  3. Custom Validators: Allows the creation of validators for specific use cases.
  4. State Management: Tracks form field states, such as valid, invalid, dirty, and pristine.
  5. Error Feedback: Dynamically displays error messages based on validation results.

 

Common Built-In Validators

  1. required: Ensures the field is not empty.
  2. minlength / maxlength: Validates input length.
  3. pattern: Validates input against a regular expression.
  4. email: Ensures a valid email format.
  5. number: Accepts only numeric values.

Example: Built-In Validation

<form name="myForm">
  <label>Email:</label>
  <input type="email" name="email" ng-model="user.email" required>
  <span ng-show="myForm.email.$error.required">Email is required.</span>
  <span ng-show="myForm.email.$error.email">Invalid email format.</span>
</form>

 

State Tracking in Validation

AngularJS tracks the state of form fields, which can be used to provide feedback:

  • $pristine: Field has not been interacted with.
  • $dirty: Field has been modified.
  • $valid: Field satisfies all validations.
  • $invalid: Field fails at least one validation.

Example: State-Based Styling

<input type="text" name="username" ng-model="user.username" required
       ng-class="{'valid': myForm.username.$valid, 'invalid': myForm.username.$invalid}">

 

Custom Validation

Custom validators can be defined using AngularJS directives.

Example: Custom Age Validator

app.directive('ageValidator', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, ngModel) {
      ngModel.$validators.age = function(value) {
        return value >= 18;
      };
    }
  };
});

Usage:

<input type="number" name="age" ng-model="user.age" age-validator>
<span ng-show="myForm.age.$error.age">You must be at least 18 years old.</span>

 

Handling Form Errors

Errors can be dynamically displayed using AngularJS's ng-show directive.

Example: Error Feedback

<form name="myForm">
  <input type="text" name="password" ng-model="user.password" minlength="6" required>
  <span ng-show="myForm.password.$error.required">Password is required.</span>
  <span ng-show="myForm.password.$error.minlength">Password must be at least 6 characters.</span>
</form>

 

Submitting Validated Forms

Forms can be submitted only if they pass all validations.

Example: Conditional Submission

<form name="myForm" ng-submit="submitForm()" novalidate>
  <input type="text" name="username" ng-model="user.name" required>
  <button type="submit" ng-disabled="myForm.$invalid">Submit</button>
</form>
<script>
  app.controller('FormController', function($scope) {
    $scope.submitForm = function() {
      if ($scope.myForm.$valid) {
        alert('Form submitted successfully!');
      }
    };
  });
</script>

 

Summary

AngularJS Validation simplifies form handling by offering built-in and custom validators, real-time error tracking, and state management. It ensures data integrity while improving the user experience with dynamic feedback and conditional form submission.

Previous