Generic Directive to submit a form in angular

Question

I have a website with tons of Formuars and I allways do the same thing before and after submitting a form. So I want to write a directive, which hide the magic which must be done.

I've the folloing markup (the ng-click is only to shorten the code. In the real code it will be hidden inside a template):

<form class="form" name="form" ng-submit="customSubmit()">
    <input ... />

    <my-submit ng-click="fakeSubmit()" type="button">Submit</my-submit>
</form>

The mySubmit Directive should look something like this:

module.directive('MySubmit', function ($state) {
    return {
        restrict: 'E',
        controller: function ($scope) {
            $scope.fakeSubmit = function () {
                // deactivate button

                var result = magicThing.callSubmitFromForm();

                // activate button
                // throw event, that form was submitted

                return false;
            }
        }
    };
});

In the directive controller there is the line magicThing.callSubmitFromForm(). This should trigger the ngSubmit magic with validators etc and then call the Method customSubmit(). I also want to have the result of the method customSubmit, which might be a Callback or something else.

As I mentioned above, I want to write a generic directive, so I don't know the function which I call here customSubmit()

Does anyone have in idea how to do this?

Check the fiddle in this post's answer - stackoverflow.com/questions/11816757/… (which is jsfiddle.net/unWF3) — FrailWords
– FrailWords, Commented Dec 1, 2015 at 18:14
That might work, but I think I have to be careful not to fire other forms, as I can have multiple Forms in the same view (but different controllers). I think, this will be a lot of magic, but it's worth a try. — waXve
– waXve, Commented Dec 2, 2015 at 8:41

waXve · Accepted Answer · 2015-12-08 16:09:05Z

I solved the Problem myself. I just override the ngSubmit directive and use a Callback in the Submit directive. Here's the code:

module.directive('ngSubmit', function ($q) {
    return {
        restrict: 'A',
        link: function (scope, elem, attr) {
            scope.mySubmit = function (callback) {

                scope.loading= true;
                scope.finished= false;

                $q.when(callback()).then(function () {
                    scope.finished= true;
                }).finally(function () {
                    scope.loading= false;
                });
            };
        }
    };
});

module.directive('submitBtn', function ($state) {
    return {
        restrict: 'E',
        templateUrl: 'myTemplate.html',
        link: function (scope, elem, attr) {
            scope.disableAfterSubmit = attr.disableAfterSubmit === 'true';
        }
    };
});

<form class="form" ng-submit="mySubmit(submitFkt)" ng-controller="AmnesiaPasswordCtrl">
    <input ... />
</form>

<button type="submit" class="btn btn-primary" ladda="loading"  ng-disabled="disable === true && finished">
    Submit
</button>

Collectives™ on Stack Overflow

Generic Directive to submit a form in angular

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related