Skip to content
Related Articles

Related Articles

AngularJS | ng-submit Directive
  • Last Updated : 28 Mar, 2019

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> 

Example 1:




<!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:
Before Click:
ngsubmit
After Click:
ngsubmit
Example 2:




<!DOCTYPE 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:
Before Click:
ngsubmit
After Click:
ngsubmit

Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.




My Personal Notes arrow_drop_up
Recommended Articles
Page :