9

I've made a directive for a special type of submit button that watches when its form is submitted, and then that buttons is disabled and gets a nice animated progress bar.

This all works fine when the form is submitted by pressing the submit button or pressing enter in one of the fields, the onsubmit handler is called just fine.

The problem: in one of my forms I have a textarea which I want to submit when the user presses the enter key. So I made an onEnter directive that just looks for the right key press and then executes a function.

<form name="form" ng-submit="controller.submit()">
    <textarea ng-model="controller.newMessage.content" 
      autofocus on-enter="controller.submit()"></textarea>
    <progress-button type="submit">Post</progress-button>
</form>

The problem of course is that this doesn't trigger the onsubmit handler, and thus the button isn't disabled or anything. How could I solve this? I've tried something like document.form.submit(), but that submits the form in the old fashioned HTML way, of course bypassing all Angular / JS code and handlers. Should I find the submit button and simulate a click? That feels very hackish too.

Sadly $scope.form is very useless, nothing there to submit it.

Edit 1: Just so the problem is clear: yes, the controller.submit() function is called just fine via the on-enter directive. However, the form doesn't get a submit event which my button is listening for.

Edit 2: Here is a gist with my button directive. The button currently needs a "pb-click" attribute, or its form needs a "pb-submit" attribute. Those functions need to return a promise.

Moving this logic to a scope variable that's set from these functions might not be a big deal since that means we can use standard ng-click and ng-submit, don't need to return promises, etc. On the other hand, if you have 5 buttons on one page you then need to create 5 scope variables. Not the best idea either. Or keep using pb-click and for forms use a scope variable?

Castro Roy
  • 7,623
  • 13
  • 63
  • 97
Kevin Renskers
  • 5,156
  • 4
  • 47
  • 95
  • just call controller.submit() at the end of your key press event? – Quad May 22 '14 at 17:31
  • Also a fiddle could help – Quad May 22 '14 at 17:32
  • Can you not use `ng-form`? – J.Wells May 22 '14 at 17:32
  • Just calling controller.submit() executes the code, yes, but bypasses the onsubmit handler of the form itself. – Kevin Renskers May 22 '14 at 17:33
  • Using ng-form makes no difference. – Kevin Renskers May 22 '14 at 17:35
  • So, are you relying on the browser default submit action here (ie you have a `
    ` you're not showing in your example)? If not, I don't see how `ng-submit="controller.submit()"` and `on-enter="controller.submit()"` do different things here.
     – Marc Kline May 22 '14 at 19:05
  • I am not relying on the default submit action, I don't have an action attribute. Yes, in both places the controller.submit() code is run just fine. However, in the second way there is no form submit event that my button directive can listen to, thus the button is never automatically disabled. Broadcasting a notification might be the only solution here, like in the answer below. – Kevin Renskers May 22 '14 at 19:30
  • Why does your directive necessarily have to listen for onsubmit vs just watching a scope variable you set by `controller.submit()`? I think the answer you're referencing provides a nice solution for a problem that probably doesn't have to exist. Can you post the code for that directive? – Marc Kline May 23 '14 at 00:42
  • Of course I could do that, but then I'd have to change every form and every controller/submit function. Listening to the onsubmit event keeps it nicely separated. – Kevin Renskers May 23 '14 at 10:02
  • Please also see Edit 2 in my question. – Kevin Renskers May 23 '14 at 10:43

2 Answers2

10

The $parse in aikoven's answer didn't seem to be working for me, so I modified it to use scope.$eval instead. I also added form.$setSubmitted() so the form properly gets the .ng-submitted class after you submit it.

app.directive('form', function() {
    return {
        require: 'form',
        restrict: 'E',
        link: function(scope, elem, attrs, form) {
            form.$submit = function() {
                form.$setSubmitted();
                scope.$eval(attrs.ngSubmit);
            };
        }
    };
});
AJ Richardson
  • 6,610
  • 1
  • 49
  • 59
  • 1
    $setSubmitted() was the key. Also, given the reserved '$' comment I changed the '$submit' method, 'submitProgrammatically' which I think is also more clear – ABCD.ca Jul 30 '15 at 21:53
9

I've managed to achieve this by adding $submit method to FormController:

module.directive('form', function($parse) {
    return {
       require: 'form',
       restrict: 'E',
       link: function(scope, element, attrs, formController) {          
           formController.$submit = $parse(attrs.ngSubmit);
       }
    };
});

You can then invoke form's ng-submit expression by calling $scope.myForm.$submit($scope) from the controller.

aikoven
  • 539
  • 6
  • 8
  • got a quick workaround :D feel free check it out :) http://stackoverflow.com/questions/28773057/how-to-do-form-submit-the-php-way-with-angularjs/28773340#28773340 – ey dee ey em Feb 27 '15 at 20:08
  • 1
    Properties starting with a `$` are reserved by angular. Better to use a name other than `$submit` in case this gets added to angular proper in the future. – Jackson Apr 17 '15 at 20:32