AngularJS ng-submit Directive

Last Updated : 08 Aug, 2022

The ng-submit Directive in AngularJS is used to specify the functions to be run on submit events. It can be used to prevent the form from submission if it does not contain an action. It is supported by <form> element.

Syntax:

<form ng-submit="expression"> 
    Content ... 
</form>

Parameter:

expression: When submitting the form, then the function will be invoked to evaluate an expression that will return the function call.

Example 1: This example describes the basic use of the ng-submit Directive in AngularJS.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>ng-submit Directive</title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js">
    </script>
</head>

<body ng-app="app" style="text-align:center">
    <h1 style="color:green">GeeksforGeeks</h1>
    <h2>ng-submit Directive</h2>

    <div ng-controller="geek">
        <form name="form1" ng-submit="save(this)" novalidate>
            <label for="name">Enter Email: </label>
            <input type="email" 
                   name="email" 
                   data-ng-model="email" required />
            <br>
            <span>{{errorMsg}}</span>
            <br>
            <input type="submit" value="Click it!">
        </form>
    </div>
  
    <script>
        var app = angular.module("app", []);
        app.controller('geek', ['$scope', function ($scope) {
            $scope.save = function ($this) {
                if ($this.form1.email.$error.required) {
                    $scope.errorMsg = "This field is required";
                }
                else if ($this.form1.$invalid) {
                    $scope.errorMsg = "Email is not valid";
                }
                else {
                    $scope.errorMsg = "";
                    alert("The given Email is accepted.");
                }
            }
        }]);
    </script>
</body>
</html>

Output:

Example 2: This example describes the ng-submit Directive in AngularJS, where the greeting message will be displayed once the user is logged in.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>ng-submit Directive</title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js">
    </script>
</head>

<body ng-app="app" style="text-align:center">
    <h1 style="color:green">GeeksforGeeks</h1>
    <h2>ng-submit Directive</h2>
    <div ng-controller="geek">
        <form name="form" ng-submit="login()" ng-hide="isShow">
            User Name: 
          <input type="text" ng-model="users.user" required />
            <br /><br />
            <button ng-disabled="form.$invalid">
                  Click to Login
              </button>
        </form>
        <br>
        <pre ng-show="isShow">Welcome <b>{{name}}</b>
            You are successfully login
            </pre>
        <input ng-show="isShow" 
               type="button" 
               value="Logout" 
               ng-click="isShow=false" />
    </div>
  
    <script>
        var app = angular.module("app", []);
        app.controller('geek', ['$scope', function ($scope) {
            $scope.users = {
                user: ""
            };
            $scope.login = function () {
                $scope.isShow = true;
                $scope.name = $scope.users.user;
                $scope.users = {
                    user: ""
                }
            };
        }]);
    </script>
</body>
</html>

Output:

AngularJS ng-submit Directive

Vishal Chaudhary 2

Improve

Article Tags :

AngularJS ng-submit Directive

Similar Reads

Thank You!

What kind of Experience do you want to share?