AngularJS ng-submit Directive

The AngularJS ng-submit directive specifies a function to be executed when the form is submitted. If you don't use the ng-submit directive in the form then it will not be submitted.

It is supported by <form> element.

Syntax:

Parameter explanation:

expression: It specifies a function that is called when the form is being submitted, or an expression to be evaluated, which should return a function call.

Let's take an example to demonstrate the usage of ng-submit directive.

See this example:

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<form ng-submit="myFunc()">
  <input type="text">
  <input type="submit">
</form>
<p>{{myTxt}}</p>
<p>In this example you can see, how an AngularJS function is executed when a form is submitted.</p>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.myTxt = "Nothing is submitted.";
  $scope.myFunc = function () {
      $scope.myTxt = "Submit button clicked successfully.";
  }
});
</script>
</body>
</html>

Test it Now

Example 2:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>  
</head>
<body ng-app="submitExample">
  <script>
  angular.module('submitExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.list = [];
      $scope.text = 'Welcome to JavaTpoint!';
      $scope.submit = function() {
        if ($scope.text) {
          $scope.list.push(this.text);
          $scope.text = '';
        }
      };
    }]);
</script>
<form ng-submit="submit()" ng-controller="ExampleController">
  Enter text and hit enter:
  <input type="text" ng-model="text" name="text" />
  <input type="submit" id="submit" value="Submit" />
  <pre>list={{list}}</pre>
</form>
</body>
</html>

Test it Now

Next TopicAngularJS ng-switch Directive

← prev next →