Open In App

AngularJS ng-submit Directive

Improve
Improve
Like Article
Like
Save
Share
Report

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=
    </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=
    </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:

 



Last Updated : 08 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads