Forms and Input Handling (ng-model)

In AngularJS, forms and input handling are made easy through data binding, especially using the ng-model directive. This feature allows developers to capture and manage form inputs efficiently, enabling a seamless integration between the view (HTML) and the model (JavaScript).

1. Introduction to Forms and ng-model

AngularJS’s ng-model directive creates a two-way binding between an HTML element (such as an input field) and the AngularJS model. This means that any changes made to the input element will automatically update the associated model, and any changes to the model will reflect in the input element. This provides a simplified way to handle form inputs without needing to manually update the DOM or the model.

2. Setting Up a Basic Form with ng-model

To demonstrate how ng-model works, let’s build a simple form that takes user input and displays it dynamically.

HTML Example:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>AngularJS Form Handling</title>
</head>
<body ng-controller="myCtrl">
    <h1>AngularJS Form Example</h1>
    <form>
        <label for="name">Name:</label>
        <input type="text" id="name" ng-model="userName">
        <br>
        <label for="email">Email:</label>
        <input type="email" id="email" ng-model="userEmail">
        <br><br>
        <button ng-click="submitForm()">Submit</button>
    </form>

    <h3>Submitted Data:</h3>
    <p>Name: {{ userName }}</p>
    <p>Email: {{ userEmail }}</p>
</body>
</html>

AngularJS Controller:

angular.module('myApp', [])
.controller('myCtrl', function($scope) {
    $scope.userName = '';
    $scope.userEmail = '';

    $scope.submitForm = function() {
        alert('Form Submitted!\nName: ' + $scope.userName + '\nEmail: ' + $scope.userEmail);
    };
});

Explanation:

The form contains two input fields for the userName and userEmail.
Each input field is bound to a model (userName, userEmail) using the ng-model directive.
When the user types into the input fields, the values of userName and userEmail are automatically updated.
When the “Submit” button is clicked, the submitForm function is triggered, and the values of userName and userEmail are displayed in an alert.

3. Working with Different Input Types

AngularJS can handle a variety of input types using ng-model. Let’s look at some common input types and how they work with AngularJS.

A. Text Input:

For simple text input, ng-model binds the text value to a model in the AngularJS controller.

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

Example:

<label for="userText">Your Message:</label>
<input type="text" id="userText" ng-model="userMessage">
<p>Your message is: {{ userMessage }}</p>

B. Radio Buttons:

AngularJS can also bind radio button selections using ng-model. The model gets updated with the selected value.

<label><input type="radio" ng-model="userChoice" value="Option 1"> Option 1</label>
<label><input type="radio" ng-model="userChoice" value="Option 2"> Option 2</label>
<p>You selected: {{ userChoice }}</p>

In this example, the model userChoice will store either “Option 1” or “Option 2” based on the user’s selection.

C. Checkboxes:

For checkboxes, ng-model will bind a Boolean value (true or false) to the model depending on whether the checkbox is checked or unchecked.

<label><input type="checkbox" ng-model="isSubscribed"> Subscribe to newsletter</label>
<p>Subscribed: {{ isSubscribed }}</p>

In this case, isSubscribed will be true if the checkbox is checked and false otherwise.

D. Select Dropdown:

ng-model can also work with <select> elements, making it easy to capture the selected option.

<label for="city">City:</label>
<select id="city" ng-model="selectedCity">
    <option value="New York">New York</option>
    <option value="Los Angeles">Los Angeles</option>
    <option value="Chicago">Chicago</option>
</select>
<p>Selected City: {{ selectedCity }}</p>

When a user selects a city from the dropdown, the selectedCity model is updated with the selected value.

4. Two-Way Data Binding in Forms

The most powerful feature of ng-model is two-way data binding. This means that when the user updates an input field, the model is automatically updated. Conversely, when the model changes (via JavaScript), the input field is automatically updated as well.

Let’s look at an example that shows the two-way data binding:

HTML Example:

<label for="userInput">Input Text:</label>
<input type="text" id="userInput" ng-model="inputText">
<p>You typed: {{ inputText }}</p>

Here, as the user types in the text box, the model inputText updates and reflects the changes immediately in the paragraph element. This is the core of two-way binding.

5. Validation in AngularJS Forms

AngularJS provides built-in form validation capabilities. With ng-model, you can easily track form input validity, such as checking if a required field is filled out, whether an input matches a specific pattern, and more.

A. Required Field Validation:

<form name="myForm">
    <label for="userName">Name:</label>
    <input type="text" id="userName" ng-model="userName" required>
    <span ng-show="myForm.userName.$touched && myForm.userName.$invalid">Name is required!</span>
</form>

The required attribute ensures that the field cannot be left blank.
The ng-show directive displays an error message if the field is invalid and touched.

B. Email Validation:

<form name="myForm">
    <label for="userEmail">Email:</label>
    <input type="email" id="userEmail" ng-model="userEmail" required>
    <span ng-show="myForm.userEmail.$touched && myForm.userEmail.$invalid">Please enter a valid email address!</span>
</form>

The type="email" input validates whether the user has entered a properly formatted email.

6. Handling Form Submission

After collecting input data with ng-model, you can handle form submission using ng-submit or ng-click.