Improve this doc View Source

Enables binding angular expressions to onsubmit events.

Additionally it prevents the default action (which for form means sending the request to the server and reloading the current page), but only if the form does not contain `action`, `data-action`, or `x-action` attributes.

Warning: Be careful not to cause "double-submission" by using both the `ngClick` and `ngSubmit` handlers together. See the `form` directive documentation for a detailed discussion of when `ngSubmit` may be triggered.

## Directive Info

- This directive executes at priority level 0.

## Usage

- as attribute:

      <form
        ng-submit="">
      ...
      </form>

### Arguments

Param | Type | Details
--- | --- | ---
ngSubmit | expression | Expression to eval. (Event object is available as `$event`)

## Example

Edit in Plunker

    <script>
      angular.module('submitExample', [])
        .controller('ExampleController', ['$scope', function($scope) {
          $scope.list = [];
          $scope.text = 'hello';
          $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>

    it('should check ng-submit', function() {
      expect(element(by.binding('list')).getText()).toBe('list=[]');
      element(by.css('#submit')).click();
      expect(element(by.binding('list')).getText()).toContain('hello');
      expect(element(by.model('text')).getAttribute('value')).toBe('');
    });
    it('should ignore empty strings', function() {
      expect(element(by.binding('list')).getText()).toBe('list=[]');
      element(by.css('#submit')).click();
      element(by.css('#submit')).click();
      expect(element(by.binding('list')).getText()).toContain('hello');
     });