AngularJS form.FormController

Last Updated : 02 Aug, 2023

AngularJS is a JavaScript-based framework. It can be used by adding it to an HTML page using a <script> tag. AngularJS helps in extending the HTML attributes with the help of directives and binding of data to the HTML with expressions. In this article, we’ll learn about the AngularJS form.FormController.

FormController

The FormController keeps track of all its controls and nested forms, as well as the state of the forms. It acts as a mediator between HTML forms and AngularJS controllers, providing an API to access form-related functionality and data. It allows you to track the state and validity of form elements, handle form submissions, implement custom validations, and more.

Methods for FormController

The FormController class has the following methods:

$addControl(): It adds control to the form.
$removeControl(): It removes a control from the form.
$getControls(): It gets an array of all the controls in the form.
$setDirty: It sets the form to a dirty state.
$setPristine: It sets the form in its pristine state.
$setUntouched: It sets the form to its untouched state.
$setSubmitted: It sets the form to its $submitted state
$setValidate(): It validates the form.
$submit(): It submits the form.
$commitViewValue(): It commits all form controls pending updates to the $modelValue.
$rollbackViewValue(): It rolls backin all form controls pending updates to the $modelValue.

Properties of FormController:

$valid: It indicates whether all the form controls are valid.
$invalid: It indicates whether any of the form controls are invalid.
$pristine: It indicates whether the form is in its initial (pristine) state, i.e., none of the form controls have been interacted with.
$dirty: It indicates whether the form has been modified (dirty) by the user.
$submitted: It indicates whether the form has been submitted.
$error: It contains any validation errors associated with the form controls.
$pending: It contains any pending asynchronous validators associated with the form controls.

We will understand the implementation of the different methods & properties associated with AngularJS FormController with the help of examples.

Using the ng-submit directive and $valid() Method

Syntax:

app.controller('FormController', function ($scope) {
    $scope.formData = {}
    $scope.submitForm = function () {
        if ($scope.myForm.$valid) {
            console.log('message!');
        }
    };
});

Example 1: In this example, we have used the ng-submit directive to trigger the form submission when the submit button is clicked. The form’s submit event is handled by the submitForm function, which checks if the form is valid before logging a success message to the console.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title> 
          AngularJS Form 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="FormController"> 
    <h1 style="color: green">GeeksforGeeks</h1> 
    <h2>AngularJS form.FormController</h2> 
  
    <form name="myForm" ng-submit="submitForm()"> 
        <label>Enter your name:</label> 
        <input type="text" 
               ng-model="formData.name" required> 
        <br> 
        <label>Enter your email:</label> 
        <input type="email" 
               ng-model="formData.email" required> 
        <br> 
        <button type="submit">Submit</button> 
    </form> 
  
    <script> 
        var app = angular.module('myApp', []); 
  
        app.controller('FormController', function ($scope) { 
            $scope.formData = {}; 
  
            $scope.submitForm = function () { 
                if ($scope.myForm.$valid) { 
                    console.log('Your form is submitted successfully!'); 
                } 
            }; 
        }); 
    </script> 
</body> 
  
</html>

Output:

ezgifcom-crop-(21).gif

Using the setPristine() Method

Syntax:

$scope.submitForm = function () {
    if ($scope.myForm.$valid) {
        console.log('Form submitted successfully!');
        $scope.myForm.$setPristine();
        $scope.formData = {}; // Clear the form data
    }
};

Example 2: In this example, we have used the setPristine() method that resets the form’s pristine state, removing any error styles and validation flags after successfully submitting the form.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title>AngularJS Form 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="FormController"> 
  
    <h1 style="color: green"> 
          GeeksforGeeks 
      </h1> 
    <h2> 
          AngularJS form.FormController 
      </h2> 
  
    <form name="myForm" 
          ng-submit="submitForm()"> 
        <label>Enter your name:</label> 
        <input type="text" 
               ng-model="formData.name" required> 
        <br> 
  
        <label>Enter your email:</label> 
        <input type="email" 
               ng-model="formData.email" required> 
        <br> 
        <button type="submit">Submit</button> 
    </form> 
  
    <script> 
        var app = angular.module('myApp', []); 
  
        app.controller('FormController', function ($scope) { 
            $scope.formData = {}; 
  
            $scope.submitForm = function () { 
                if ($scope.myForm.$valid) { 
                    console.log('Form submitted successfully!'); 
                    $scope.myForm.$setPristine(); 
                    
                  // Clear the form data 
                    $scope.formData = {};  
                } 
            }; 
        }); 
    </script> 
</body> 
  
</html>