Previous

AngularJS Forms

AngularJS forms are an integral part of web applications for collecting user input. They provide features for validation, tracking user interactions, and submitting data seamlessly.

Key Features of AngularJS Forms

  1. Two-Way Data Binding: Synchronizes form inputs with the model in real time.
  2. Validation: Built-in validators for common requirements, such as required fields and email format.
  3. State Tracking: Tracks states like dirty, touched, and valid.
  4. Custom Validation: Allows creating custom validators for specific needs.
  5. Error Handling: Provides dynamic feedback based on validation status.

 

Common Form States

  • $pristine: The form has not been interacted with.
  • $dirty: The form has been modified.
  • $touched: The field has been focused and blurred.
  • $untouched: The field has not been focused.
  • $valid: All validations have passed.
  • $invalid: One or more validations have failed.

 

Creating Forms in AngularJS

Example: Basic Form

<form name="myForm" ng-submit="submitForm()">
  <label>Name:</label>
  <input type="text" name="userName" ng-model="user.name" required>
  <span ng-show="myForm.userName.$error.required">Name is required.</span>
  <br>

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

  <button type="submit" ng-disabled="myForm.$invalid">Submit</button>
</form>

 

Form Validation in AngularJS

Built-In Validators

  1. required: Ensures a field is not empty.
  2. email: Validates the format of an email address.
  3. number: Validates numeric input.
  4. minlength / maxlength: Ensures input length is within bounds.
  5. pattern: Validates input against a regular expression.

Example: Validation

<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>

 

Custom Validators

You can define custom validators using AngularJS directives.

Example: Custom Validator for Age

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 required>
<span ng-show="myForm.age.$error.age">You must be at least 18 years old.</span>

 

Submitting Forms

AngularJS allows you to handle form submissions using the ng-submit directive.

Example: Form Submission

<form name="myForm" ng-submit="submitForm()">
  <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 forms simplify user input handling by offering real-time validation, error tracking, and submission support. With features like state tracking, custom validators, and built-in validation, AngularJS forms enhance both user experience and developer productivity.

Previous