jqxgrid and angular form

Question

I'm using jqxgrid inside angular form. When you change something in grid, an angular form does not become dirty. I decided to bind to grid cellvaluechaned event in which I call $setDirty() for my angular form. It works. But I do not want in each place where form is used to call $setDirty(). Could you please tell me how can I find the closest form in DOM tree and make it dirty? I want to write this code one time and want that it works for each form where there is a grid inside these forms. Thanks guys.

Answer 1

You can create a directive that will loop over all the necessary html elements under it and add the relevant events.

Here's a template to get you started:

    angular.module("app", []).directive("changeform", function() {
        var directive = {
            restrict: 'A',
            require: 'form',
            link: function(scope, element, attrs, ctrl) {
                // here you would use element.find() to get the elements
                // and then use .on() on the elements with the event
                // and then use the ctrl (which is of type FormController)
                // to set $dirty [https://docs.angularjs.org/api/ng/type/form.FormController]
            }
        }
    })

and then the HTML should look like:

<form name="myForm" changeform> ... </form>

https://docs.angularjs.org/api/ng/type/form.FormController