AngularJS ngsubmit

  • The ng-submit directive in AngularJS used to identifies a function to be executed when the form is submitted.
  • It Specifies the expressions to run on onsubmit events.
  • It is supported by <form> elements.
  • If we don’t use the ng-submit directive in the form element, then it will not be submitted.

Syntax for ng-submit directive in AngularJS:

<form ng-submit=”expression”></form>

Parameter Values:

Value Description
expression An expression to be evaluated, which should return a function call.

Sample coding for ng-submit directive in AngularJS:

 Tryit<!DOCTYPE html>
        <title>Wikitechy AngularJS Tutorials</title>
        <script src="
    <body ng-app="myApp" ng-controller=”submitCtrl”>
        <h3>ng-submit directive in AngularJS Tutorial</h3>
        <form ng-submit="myFunc()">
            Enter text:<input type="text"><br><br>
            <input type="submit">
            <h2>Text submitted {{count}} times successfully</h2>
            <var app = angular.module( "myApp" , []);
            app.controller("submitCtrl", function($scope) {
                $scope.myFunc = function () {
                    $scope.count = $scope.count + 1;

Code Explanation for ng-submit directive in AngularJS:

Code Explanation for AngularJS ngsubmit

  1. The ng-app specifies the root element (“myApp”) to define AngularJS application.
  2. The ng-controller controls the data of “submitCtrl” in AngularJS application.
  3. The ng-submit directive is used for a function ($scope.myFunc) to be called when the form is being submitted
  4. The “submit” is declare the type value of the <input> tag.
  5. The expression count will be executed and get the count value from the $scope.myFunc
  6. $scope.count is used to declare the count value is 0.
  7. $scope.myFunc is the angular function is used to increment count value ($scope.count+1) and the output will be updated in the <script> tag.

Sample Output for ng-submit directive in AngularJS:

Sample Output1 for AngularJS ngsubmit

  1. The input field is displayed in the output with submit button.
  2. The output displays the text submitted 0 times because the user does not click the submit button.

Sample Output2 for AngularJS ngsubmit

  1. If the user type the text in the input field and clicks the submit button.
  2. The output shows the text submitted 12 times because the user clicks the submit button 12 times.

Related Searches to angularjs ngsubmit directive