How do I submit a form when input ng-change in AngularJS

Question

What is the "AngularJS way" of doing a form submit when any of its inputs have been clicked (or changed)?

<form ng-submit="submit($event)" id="myForm">
  <input type="checkbox" name="foo" value="bar" ng-click="???"/>
</form>

I'm tempted to use jQuery and simply doing ng-click="$('#myForm').submit()", but it's probably worth learning it properly.

I have tried doing ng-click="submit($event)", but the error here is the $event object within the scope of the input instead of the entire form (correct me if I'm wrong, this is what I'm getting from the documentation).

Dorwin

Answer 1

Well, you can do something like this for sure by triggering the AngularJS submit event:

$scope.change = function($event) {
    $timeout(function() {
        angular.element($event.target.form).triggerHandler('submit');
    });
};

where

<input type="checkbox" name="foo" value="bar" ng-click="change($event)" />

However I think it's better to simply use the same function in ngClick as used in ngSubmit.

Demo: http://plnkr.co/edit/tJIYD9ZVjYzwA2aXJobo?p=preview

Mastersinger

Trying this now, quick question: I'm trying to log the query string for the form (i.e. ?foo=bar) in my $scope.submit function. In jQuery I would use $(event.currentTarget).serialize();. How would I console.log the query string using plain angular/jQLite? – Dorwin

Why do you need it? If you plan to send data with AJAX call then $http service will serialize data for you from the object. If you use jQuery you can still use $.param({...}). – Mastersinger

Make sure you use ngModel directive on your input elements, like <input type="checkbox" name="foo" ng-model="model.check" value="bar" ng-click="change($event)" /> <input type="text" ng-model="model.name">, etc. Then you will be able to access model data as $scope.model - will give you an object of data, which you can send to backend using $http. – Mastersinger

Unfortunately I don't have a say in how I implement the ajax requests, I must obtain the query string. – Dorwin

Okay, if you need query string you should anyway give form elements ngModel directive like ng-model="model.username", etc. Then in controller in submit function use $scope.model object to construct query string using simple for loop for (var key in $scope.model) { ... }. Using jQuery it would be just $.param($scope.model). – Mastersinger

The issue I have with that approach is handling checkboxes. The old fashion non-ajax way is simple: give checkboxes name="colors[]" and be done with it. I'm having trouble handling arrays in my query string using the ngModel. – Dorwin

Yes, in angular it's a little less convenient. There are different approaches. Take a look at this question: #14514961 – Mastersinger

Answer 2

ng-change is what worked for me using a text input:

<form>
    <select data-ng-model="headerName" data-ng-options="header for header in headers"
            data-ng-change="calculateCorrelations()"></select>
</form>

Lorikeet