Course Progress 49%

AngularJS Forms

← AngularJS Events AngularJS Form Validation →

AngularJS Forms का उपयोग user से input लेने, data validate करने और submit करने के लिए किया जाता है। AngularJS forms normal HTML forms से ज्यादा powerful होते हैं क्योंकि इनमें built-in validation, state tracking और two-way data binding पहले से available होती है।

AngularJS forms automatically user input को model से bind करते हैं और form की current state को track करते रहते हैं।

AngularJS Form का Basic Concept

AngularJS form में:

  • <form> tag AngularJS form बन जाता है
  • हर input field model से bind होती है
  • Form और input की state AngularJS खुद manage करता है

Form का main goal होता है:

  • Correct data collect करना
  • User को instant feedback देना
  • Invalid data submit होने से रोकना

Simple AngularJS Form Example

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

    <p>Email:</p>
    <input type="email" ng-model="user.email">

    <p>Name: {{user.name}}</p>
    <p>Email: {{user.email}}</p>
  </form>
</div>

<script>
  var app = angular.module("myApp", []);
  app.controller("formCtrl", function($scope) {
    $scope.user = {};
  });
</script>

Code Explanation

  • <form> AngularJS form की तरह behave करता है
  • ng-model input को $scope.user object से bind करता है
  • Two-way data binding की वजह से input और view sync रहते हैं
  • User typing करते ही data model update होता है

Form Name और Input Name

AngularJS form को name देने से उसकी state access की जा सकती है।

<form name="userForm">
  <input type="text" name="username" ng-model="name">
</form>

Code Explanation

  • userForm पूरा form represent करता है
  • username input field की state रखता है
  • Form और input की validity AngularJS track करता है

AngularJS Form States

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

Common states:

  • $pristine – input untouched है
  • $dirty – input change किया गया है
  • $valid – input valid है
  • $invalid – input invalid है
  • $touched – input focus होकर blur हुआ है
<p>Form Valid: {{userForm.$valid}}</p>
<p>Form Dirty: {{userForm.$dirty}}</p>

Code Explanation

  • AngularJS real-time form state provide करता है
  • Validation और UX improve करने में मदद मिलती है

Required Validation

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

  <p ng-show="myForm.username.$invalid">
    Username is required
  </p>
</form>

Code Explanation

  • required attribute validation apply करता है
  • $invalid true होने पर error message show होता है
  • User input देते ही validation update होती है

Email Validation

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

<p ng-show="myForm.email.$error.email">
  Invalid email address
</p>

Code Explanation

  • type="email" built-in email validation देता है
  • $error.email invalid email detect करता है
  • Manual regex लिखने की जरूरत नहीं होती

Minlength और Maxlength Validation

<input type="text"
       ng-model="password"
       ng-minlength="5"
       ng-maxlength="10">

Code Explanation

  • ng-minlength minimum characters set करता है
  • ng-maxlength maximum characters limit करता है
  • AngularJS automatically validation apply करता है

Number Validation

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

Code Explanation

  • Number input automatic numeric validation देता है
  • min और max allowed range set करते हैं

Custom Validation Message

<p ng-show="myForm.username.$touched && myForm.username.$invalid">
  Please enter valid username
</p>

Code Explanation

  • $touched ensure करता है कि message तभी दिखे जब user input touch करे
  • UX friendly validation messages मिलते हैं

Disable Submit Button

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

Code Explanation

  • Form invalid होने पर button disabled रहता है
  • Wrong data submit होने से बचाता है

ng-submit का उपयोग

<form name="myForm" ng-submit="saveData()">
  <input type="text" ng-model="name" required>
  <button type="submit">Save</button>
</form>

$scope.saveData = function() {
  $scope.message = "Form Submitted Successfully";
};

Code Explanation

  • ng-submit form submit event handle करता है
  • Page reload नहीं होता
  • AngularJS function safely execute होता है

Form Reset करना

<button ng-click="reset()">Reset</button>

$scope.reset = function() {
  $scope.user = {};
  $scope.myForm.$setPristine();
  $scope.myForm.$setUntouched();
};

Code Explanation

  • Model values reset हो जाती हैं
  • Form state वापस initial condition में चली जाती है

CSS Classes in AngularJS Forms

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

  • ng-valid
  • ng-invalid
  • ng-pristine
  • ng-dirty
  • ng-touched
  • ng-untouched
input.ng-invalid {
  border-color: red;
}

input.ng-valid {
  border-color: green;
}

Code Explanation

  • Validation status के अनुसार styling होती है
  • Visual feedback user को मिलता है

AngularJS Forms Best Practices

  • Always form और inputs को name दें
  • Validation messages clear रखें
  • Submit button को $invalid से control करें
  • Heavy logic controller या service में रखें

Common Form Mistakes

  • ng-submit की जगह ng-click use करना
  • Validation ignore करना
  • Form state को check न करना
  • Error messages हमेशा show करना

Summary

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

  • AngularJS forms का basic concept
  • Form और input states
  • Built-in validations
  • Error messages और UX improvement
  • Form submit, reset और best practices
← AngularJS Events AngularJS Form Validation →
  • Home