Course Progress 51%

AngularJS Form Validation

← AngularJS Forms AngularJS API →

AngularJS Form Validation का उपयोग user द्वारा enter किए गए data को validate करने के लिए किया जाता है ताकि गलत या incomplete data submit न हो। AngularJS में form validation built-in होती है, जिससे बिना extra JavaScript लिखे powerful validation system बनाया जा सकता है।

AngularJS real-time validation provide करता है, यानी user input करते समय ही validation status update होता रहता है।

AngularJS Validation कैसे काम करता है

AngularJS:

  • हर input की validity check करता है
  • Form और input की state maintain करता है
  • CSS classes automatically add करता है
  • Error details $error object में store करता है

Simple Validation Example

<div ng-app="myApp" ng-controller="valCtrl">
  <form name="userForm">
    <p>Name:</p>
    <input type="text"
           name="username"
           ng-model="user.name"
           required>

    <p ng-show="userForm.username.$touched && userForm.username.$invalid">
      Name is required
    </p>

    <button ng-disabled="userForm.$invalid">Submit</button>
  </form>
</div>

var app = angular.module("myApp", []);
app.controller("valCtrl", function($scope) {
  $scope.user = {};
});

Code Explanation

  • required attribute mandatory validation apply करता है
  • $touched check करता है कि user input field को touch कर चुका है
  • $invalid true होने पर error message show होता है
  • Invalid form होने पर submit button disabled रहता है

Built-in Validation Types

AngularJS कई built-in validation provide करता है।

Required Validation

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

Explanation

  • Field खाली होने पर invalid मानी जाती है
  • $error.required true हो जाता है

Email Validation

<input type="email" name="email" ng-model="email" required>
<p ng-show="myForm.email.$error.email">
  Invalid email address
</p>

Explanation

  • type="email" email format check करता है
  • गलत format होने पर $error.email true होता है

URL Validation

<input type="url" ng-model="website">

Explanation

  • URL format automatically validate होता है
  • Invalid URL पर field invalid हो जाती है

Number Validation

<input type="number" ng-model="age" min="18" max="60">

Explanation

  • Numeric value ही accept होती है
  • Min और max range enforce होती है

Minlength और Maxlength

<input type="text"
       ng-model="password"
       ng-minlength="6"
       ng-maxlength="12">

Explanation

  • Password length range check होती है
  • $error.minlength और $error.maxlength update होते हैं

Pattern Validation

<input type="text"
       ng-model="username"
       ng-pattern="/^[a-zA-Z]+$/">

Explanation

  • Regular expression से input validate होता है
  • Only alphabets allow किए जाते हैं

Form और Input States

AngularJS हर input की state maintain करता है।

<p>Valid: {{userForm.username.$valid}}</p>
<p>Dirty: {{userForm.username.$dirty}}</p>
<p>Touched: {{userForm.username.$touched}}</p>

Explanation

  • $valid input valid है या नहीं
  • $dirty input change हुआ या नहीं
  • $touched focus के बाद blur हुआ या नहीं

Error Object ($error)

AngularJS validation errors $error object में store करता है।

<p ng-show="userForm.username.$error.required">
  Username is required
</p>

Explanation

  • $error में error type key के रूप में होता है
  • Multiple errors एक साथ handle किए जा सकते हैं

Disable Submit Button

<button ng-disabled="userForm.$invalid">
  Submit
</button>

Explanation

  • Form invalid होने पर submit रोक दिया जाता है
  • Data safety improve होती है

CSS Styling with Validation

AngularJS automatically CSS classes add करता है।

input.ng-invalid.ng-touched {
  border: 1px solid red;
}

input.ng-valid.ng-touched {
  border: 1px solid green;
}

Explanation

  • Visual feedback user को मिलता है
  • UX बेहतर बनता है

Custom Validation (ng-model-options)

<input type="text"
       ng-model="code"
       ng-model-options="{ updateOn: 'blur' }"
       required>

Explanation

  • Validation blur event पर trigger होती है
  • Real-time validation control किया जा सकता है

Custom Validator Directive

AngularJS में custom validation directive भी बनाई जा सकती है।

app.directive("noNumbers", function() {
  return {
    require: "ngModel",
    link: function(scope, element, attrs, ctrl) {
      ctrl.$validators.noNumbers = function(value) {
        return !/\d/.test(value);
      };
    }
  };
});

<input type="text" ng-model="name" no-numbers>

Code Explanation

  • Custom validator define किया गया है
  • Numbers allow नहीं होते
  • Validation AngularJS lifecycle में run होती है

Show Error Only After Submit

<form name="myForm" ng-submit="submitted=true">
  <input type="text" name="name" ng-model="name" required>

  <p ng-show="submitted && myForm.name.$invalid">
    Name is required
  </p>
</form>

Explanation

  • Error तभी दिखेगा जब submit attempt हो
  • UX clean रहता है

Validation Best Practices

  • Always input और form को name दें
  • $touched या submit flag का उपयोग करें
  • Clear और simple error messages रखें
  • Custom validation directives reuse करें

Common Validation Mistakes

  • Error messages हमेशा दिखाना
  • Form state ignore करना
  • Custom validation logic controller में लिखना
  • CSS classes का गलत use

Summary

इस chapter में आपने सीखा:

  • AngularJS form validation कैसे काम करती है
  • Built-in validation types
  • Form और input states
  • $error object का उपयोग
  • Custom validation और best practices
← AngularJS Forms AngularJS API →
  • Home