ng-model – Binding input fields to model data

In AngularJS, the ng-model directive is used for two-way data binding, which means it creates a direct connection between the input fields (like text boxes, checkboxes, radio buttons, etc.) and the model (scope variables) in the application.

With ng-model, any changes made in the input field immediately reflect in the model and vice versa, making it a powerful tool for dynamic applications.

In this guide, we will cover:

What is ng-model?
How ng-model works?
Syntax and Basic Example
Supported Input Types
Two-Way Data Binding with ng-model
Using ng-model with Forms
Binding ng-model with Objects
Common Mistakes and Troubleshooting
Best Practices
Conclusion

1. What is `ng-model`?

The ng-model directive in AngularJS binds an input field to a scope variable, allowing changes in the input field to update the model and changes in the model to update the input field.

Key Features:

Two-way data binding (UI ↔ Model).
Works with form elements (input, textarea, select, etc.).
Automatically updates the view when the model changes.
Can be used with ng-bind and ng-controller.
Helps in form validation and real-time data updates.

2. How `ng-model` Works?

When you use ng-model, AngularJS automatically updates the variable in $scope whenever the user types something in the input field. Similarly, if the value of the variable changes elsewhere in the code, it will reflect in the input field.

3. Syntax and Basic Example

Basic Syntax:

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

ng-model="variableName" binds the input field to a variable in the scope.
The value entered in the input field is automatically stored in variableName.

Basic Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>ng-model Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="MyController">

    <label>Enter Your Name:</label>
    <input type="text" ng-model="name">
    <p>Hello, {{ name }}!</p>

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

</body>
</html>

Explanation:

The ng-model="name" binds the input field to $scope.name.
When the user types in the input field, name is updated, and the <p> tag dynamically reflects the new value.

4. Supported Input Types

ng-model works with various form elements:

Text Input:

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

Textarea:

<textarea ng-model="comments"></textarea>

Checkbox:

<input type="checkbox" ng-model="isChecked">

Radio Buttons:

<input type="radio" ng-model="gender" value="Male"> Male
<input type="radio" ng-model="gender" value="Female"> Female

Dropdown (Select):

<select ng-model="selectedOption">
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
</select>

Number Input:

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

5. Two-Way Data Binding with `ng-model`

AngularJS automatically updates both the view and the model when using ng-model.

Example: Live Data Binding

<body ng-app="myApp" ng-controller="MyController">
    <label>Enter Text:</label>
    <input type="text" ng-model="textData">
    <p>Live Output: {{ textData }}</p>
</body>

As the user types in the input field, textData updates in real time and is reflected in the <p> tag.

6. Using `ng-model` with Forms

Example: Form Submission with `ng-model`

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="FormController">

    <form ng-submit="submitForm()">
        <label>Name:</label>
        <input type="text" ng-model="user.name" required><br>

        <label>Email:</label>
        <input type="email" ng-model="user.email" required><br>

        <button type="submit">Submit</button>
    </form>

    <p>Submitted Data: {{ user | json }}</p>

    <script>
        var app = angular.module("myApp", []);
        app.controller("FormController", function($scope) {
            $scope.user = {};
            $scope.submitForm = function() {
                alert("Form Submitted: " + JSON.stringify($scope.user));
            };
        });
    </script>

</body>
</html>

Explanation:

ng-model="user.name" and ng-model="user.email" bind input fields to the user object.
ng-submit="submitForm()" executes the function when the form is submitted.

7. Binding `ng-model` with Objects

You can use ng-model to bind input fields to object properties.

Example: Binding an Object

<input type="text" ng-model="user.firstName">
<input type="text" ng-model="user.lastName">
<p>Full Name: {{ user.firstName + " " + user.lastName }}</p>

The user object dynamically updates as the user types.

8. Common Mistakes and Troubleshooting

Forgetting to Include AngularJS

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

If the AngularJS library is missing, ng-model won’t work.
Solution: Add AngularJS before using ng-model:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>

Using `ng-model` Outside `ng-app` Scope

<input type="text" ng-model="name"> <!-- Won’t work -->

Solution: Wrap it inside an AngularJS application:

<body ng-app="myApp" ng-controller="MyController">