AngularJS ngmodel Directive (original) (raw)

AngularJS ng-model Directive

Last Updated : 07 Aug, 2024

The ngModel directive is a directive that is used to bind the values of the HTML controls (input, select, and textarea) or any custom form controls, 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 form validations. The various form input types (text, checkbox, radio, number, email, URL, date, datetime-local time, month, week) can be used with the _ngModel directive. This directive is supported by , & .

**Syntax:

**Example 1: This example describes the basic usage of the **ng-model Directive in AngularJS.

HTML `

GeeksforGeeks

ng-model Directive

Input Box

 {{ name }} 

 {{ check }} 

 {{ choice }} 

 {{ num }} 

 {{ mail }} 

 {{ url }} 

 Todays date:{{ date1 }}

 {{ date2 }} 

 {{ time1}} 

 {{ mon }} 

 {{ we }} 

`

**Output:

https://media.geeksforgeeks.org/wp-content/uploads/20240806124713/ngmodel.mp4

In order to make URL and email print, we have to write a valid email/URL only then it would get printed. In the case of printing of date, and time using _ngmodel, then 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.

**HTML forms using the ng-model directive: We can define _ngModel in the following way by writing the below code in the __app.component.html_file.

{{ phone.value }}

The **ngModel directive 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 purposes. The following is the list of classes for validation purposes:

• **ng-touched: It shows that field has been touched.
• **ng-untouched: It shows that field has not been touched yet.
• **ng-valid: It specifies that the field content is valid.
• **ng-invalid: It specifies that the field content is not valid.
• **ng-dirty: It illustrates that the field has been modified.
• **ng-pristine: It represents that the field has not been modified yet.

**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 the rest of the parts of the code.

**Syntax:

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

We can add this to the input element.

**Example 2: This example describes the **ng-model Directive in AngularJS, where we have bound the ngModel directive with getter and setter.

HTML `

<style>
    body {

        font-family: Arial;
        margin-left: 45px;
    }

    h1 {
        color: green;
    }
</style>

GeeksforGeeks

ng-model Directive

user.name = 
                
            

user.name =
                
            

`

**Output: Here, we have initialized name 1 by the string GeeksforGeeks and **name 2 by an empty string.

https://media.geeksforgeeks.org/wp-content/uploads/20240806124728/ngmodel1.mp4

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