Skip to content
Related Articles

Related Articles

AngularJS ng-submit Directive

Improve Article
Save Article
  • Last Updated : 08 Aug, 2022
Improve Article
Save Article

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:

 


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!