Skip to content
Related Articles

Related Articles

AngularJS | ng-model Directive
  • Last Updated : 23 May, 2019

ngModel is a directive which binds input, select and textarea, and stores the required user value in a variable and we can use that variable whenever we require that value.
It also is used during validations in a form.

We can use ngModel with:

  1. input
    • text
    • checkbox
    • radio
    • number
    • email
    • url
    • date
    • datetime-local
    • time
    • month
    • week
  2. select
  3. textarea

Example:




<!DOCTYPE html>
<html>
<script src=
</script>
<style>
    .column {
        float: left;
        text-align: left;
        width: 49%;
    }
      
    .row {
        content: "";
        display: table;
    }
</style>
  
<body ng-app="myApp" 
      ng-controller="myController">
    <h4>Input Box-</h4>
    <div class="row">
        <div class="column">
            Name-
            <input type="text" 
                   ng-model="name">
            <pre>  {{ name }} </pre> Checkbox-
            <input type="checkbox" 
                   ng-model="check">
            <pre> {{ check }} </pre> Radiobox-
            <input type="radio" 
                   ng-model="choice">
            <pre> {{ choice }} </pre> Number-
            <input type="number" 
                   ng-model="num">
            <pre> {{ num }} </pre> Email-
            <input type="email" 
                   ng-model="mail">
            <pre> {{ mail }} </pre> Url-
            <input type="url"
                   ng-model="url">
            <pre> {{ url }} </pre>
        </div>
        <div class="column">
            Date:
            <input type="date" ng-model="date1" (change)="log(date1)">
            <pre> Todays date:{{ date1+1 }}</pre> Datetime-local-
            <input type="datetime-local" ng-model="date2">
            <pre> {{ date2+1 }} </pre> Time-
            <input type="time" ng-model="time1">
            <pre> {{ time1+1 }} </pre> Month-
            <input type="month" ng-model="mon">
            <pre> {{ mon+1 }} </pre> Week-
            <input type="week" ng-model="we">
            <pre> {{ we+1 }} </pre>
        </div>
    </div>
</body>
<script>
    var app = angular.module('myApp', []);
    app.controller('myController', function($scope) {
        $scope.name = "Hello Geeks!";
        $scope.check = "";
        $scope.rad = "";
        $scope.num = "";
        $scope.mail = "";
        $scope.url = "";
        $scope.date1 = "";
        $scope.date2 = "";
        $scope.time1 = "";
        $scope.mon = "";
        $scope.we = "";
        $scope.choice = "";
        $scope.c = function() {
        $scope.choice = true;
        };
    });
</script>
  
</html>

inputngmodel

In order to make url and email print, we have to write a valid email/url only then it would get printed. In case of printing of date, time using ngmodel we have to fill in all the fields in the input box. The radio button once selected won’t get deselected since in the function of “c” we are setting the value of choice as true.



Ngmodel using forms:
We can define ngModel in this way also,

Write the below code in app.component.html




<div class="form-group">
    <label for="phone">mobile</label>
    <form>   
    <input 
          type="text"  
          id="phone" 
          ngModel name="phone"
          #phone="ngModel"
          placeholder="Mobile">
</form>
<pre>{{ phone.value }}</pre>
</div>

ngModel stores a variable by reference, not value. Usually in binding inputs to models that are objects (e.g. Date) or collections (e.g. arrays).

The phone object created has many fields which are used for validation purpose. We can add the following classes for validation purpose. We are listing only the important ones.

  1. ng-touched
  2. ng-untouched
  3. ng-valid
  4. ng-invalid
  5. ng-dirty
  6. ng-pending
  7. ng-pristine

Binding ngModel with getter and setter:
Whenever a function is called with zero arguments then it returns a representation of the model. And when called with a parameter it sets the value. Since ngModel refers to address that is why it does not save the changed value in the object itself rather it saves it in some internal state (variable-name.value). It will be useful if we keep a practice of using getter and setter for models when there is an internal representation as the getter and setter function gets more often called as compared to rest of the parts of the code.

Syntax:

ng-model-options="{ getterSetter: true }"

Add this to the input tab.

Example:




<html>
<head>
</script>
</head>
<body ng-app="myApp">
  <div ng-controller="myController">
  <form>
  Name:<input type="text" name="Name"
             ng-model="user.name"
             ng-model-options="{ getterSetter: true }" />
  <pre>user.name = <span ng-bind="user.name()"></span></pre>
  Name1:<input type="text" name="Name1"
             ng-model="user.name1"
             ng-model-options="{ getterSetter: true }" />
  <pre>user.name = <span ng-bind="user.name1()"></span></pre>
  </form>
 </div>
<script>
angular.module('myApp', [])
  .controller('myController', ['$scope', function($scope) {
    name = 'GeeksforGeeks';
    name1 = "";
    $scope.user = {
      name: function(Name) {
      return arguments.length ? (name = Name) : name;
      },
      name1: function(Name1) {
      return arguments.length ? (name1 = Name1) : name1;
      
    };
  }]);
</script>
</body>
</html>

Here, we have initialized name by the string Geeksforgeeks and name1 by an empty string.

ngmodel1

References:
https://docs.angularjs.org/api/ng/directive/ngModel

My Personal Notes arrow_drop_up
Recommended Articles
Page :