Course Progress 16%

AngularJS ng-model Directive

← AngularJS Directives AngularJS Data Binding →

ng-model directive AngularJS का एक core directive है, जिसका उपयोग HTML form controls को application data (model) से bind करने के लिए किया जाता है। यह AngularJS में two-way data binding को possible बनाता है, जिससे View और Model हमेशा sync में रहते हैं।

AngularJS applications में forms और user input handle करने के लिए ng-model सबसे ज़्यादा use होने वाला directive है।

ng-model क्या करता है

ng-model directive:

  • Input field की value को model में store करता है
  • Model में change होने पर View को update करता है
  • View में change होने पर Model को update करता है
  • Form validation में मदद करता है

ng-model का Basic Example

<div ng-app>
  <p>Enter your name:</p>
  <input type="text" ng-model="name">
  <p>Hello {{name}}</p>
</div>

यह example दिखाता है कि input change होते ही output automatically update हो जाता है।

ng-model और Two-Way Data Binding

Two-way data binding का मतलब है:

  • Model → View update
  • View → Model update
<div ng-app ng-init="city='Delhi'">
  <input type="text" ng-model="city">
  <p>City: {{city}}</p>
</div>

यह behavior बिना extra JavaScript code के मिलता है।

Different Form Controls के साथ ng-model

ng-model कई तरह के form elements के साथ काम करता है।

Text Input

<input type="text" ng-model="username">

Number Input

<input type="number" ng-model="age">

Checkbox

<input type="checkbox" ng-model="isActive">
<p>Status: {{isActive}}</p>

Radio Button

<input type="radio" ng-model="gender" value="Male"> Male
<input type="radio" ng-model="gender" value="Female"> Female
<p>Gender: {{gender}}</p>

Select Box

<select ng-model="country">
  <option value="India">India</option>
  <option value="USA">USA</option>
</select>
<p>Country: {{country}}</p>

ng-model और Controller का Use

Real applications में ng-model controller के data से bind होता है।

<div ng-app="myApp" ng-controller="myCtrl">
  <input type="text" ng-model="username">
  <p>Welcome {{username}}</p>
</div>

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

ng-model और Validation

ng-model AngularJS form validation के साथ integrate होता है।

<form name="myForm">
  <input type="email" ng-model="email" required>
  <p>Valid: {{myForm.email.$valid}}</p>
</form>

AngularJS automatically form और input state track करता है।

ng-model CSS Classes

AngularJS input elements पर automatically CSS classes apply करता है।

Common classes:

  • ng-valid
  • ng-invalid
  • ng-touched
  • ng-untouched
  • ng-dirty
  • ng-pristine

इन classes का उपयोग करके आप form styling और error messages दिखा सकते हैं।

ng-model और ng-change

ng-change directive का उपयोग model change होने पर function call करने के लिए किया जाता है।

<input type="text" ng-model="name" ng-change="nameChanged()">

$scope.nameChanged = function() {
  console.log("Name changed");
};

Common ng-model Mistakes

  • ng-model को non-form element पर use करना
  • Controller scope से variable define न करना
  • Form name या input name missing होना
  • Wrong input type का use करना

Summary

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

  • ng-model directive क्या है
  • Two-way data binding कैसे काम करता है
  • Different form elements के साथ ng-model
  • Controller के साथ ng-model का उपयोग
  • Validation और CSS classes
  • ng-change के साथ ng-model
← AngularJS Directives AngularJS Data Binding →
  • Home