Programatically closing forms

[stillnet]

I have a number of editable forms inside an ng-repeat. The user can flip these forms into editable mode, make changes, then when done with all the forms they can click a single save button that sends all the data to the server. My problem is if the user doesn't click a submit button on each form to close it, the model is not updated. So their changes don't get sent to the server. I am able to loop through the forms in code and call $cancel(), that "closes" the forn but of course their data doesn't get saved into the model. I guess there is no $save() or similar method?

I was able to do this: $(".editableFormSubmitButton").each(function(index,element) { $(element).trigger("click");} );

which seems kind of hacky but works - the forms get closed & the model is updated. But I also get an angular error that I can't figure out (below). So this doesn't seem like a good solution. Any ideas? There should probably be a $save() method, right?

Error: [$rootScope:inprog] http://errors.angularjs.org/1.4.0-beta.6/$rootScope/inprog?p0=%24apply
    at Error (native)
    at https://code.angularjs.org/1.4.0-beta.6/angular.min.js:6:423
    at n (https://code.angularjs.org/1.4.0-beta.6/angular.min.js:123:88)
    at q.$get.q.$apply (https://code.angularjs.org/1.4.0-beta.6/angular.min.js:131:79)
    at HTMLFormElement.Gd.compile.pre.q (https://code.angularjs.org/1.4.0-beta.6/angular.min.js:236:114)
    at Object.v.event.trigger (http://navpointdev.local/js/jquery/jquery-1.8.3.min.js:2:37014)
    at HTMLButtonElement.<anonymous> (http://navpointdev.local/js/jquery/jquery-1.8.3.min.js:2:44416)
    at Function.v.extend.each (http://navpointdev.local/js/jquery/jquery-1.8.3.min.js:2:14543)
    at v.fn.v.each (http://navpointdev.local/js/jquery/jquery-1.8.3.min.js:2:11217)
    at v.fn.extend.trigger (http://navpointdev.local/js/jquery/jquery-1.8.3.min.js:2:44392)

[stillnet]

Hmm this isn't in the docs but I found a $submit() method by digging through the source code. This seems to work great:

$('.editableForm').each(function(index,element) { $(element).data().$formController.$submit() });

[stillnet]

Ok I found there is a $save() method also, which seems more correct and also works. Are these methods unsupported?

[dimaslz]

The only way to execute the action $show by code is pass object e-form="THIS_ID" by method, for example:

<span editable-text="item.description" e-form="editableDocumentDescription" buttons="no" ng-click="methodToExecute(editableDocumentDescription)">{{item.description}}</span>

and in your code, you can execute an action:

function methodToExecute(object) {
   object.$show(); // for example
}

[Madd0g]

@dimaslz - Is there a way to do this from the parent controller? Where does the e-form become available? Only inside that element? How can I pass it to the external controller scope for it to decide when to call $show?

It seems like all the examples are around using the variable set in e-form inside the element where it is set, but how to use it from outside??

I wanted to post a new issue to ask this, but since this is so relevant, I thought I'd post here.

Thanks

[m-apsolon]

probably not the case, but did you actually set "blur='submit'" on every form? just asking since we had a case where one of ours forgot it and wasted considerable time for finding a 'workaround' ..

[dlwhiteman]

I have a similar request as @Madd0g . I want to call $save() on the form when the user is saving the page on which the form resides. There are other fields on the page, and I don't want to make them click the form's save button before they can save the whole page, so I'm trying to programatically call save on the xeditable form when they try to save the page. I am unsuccessful in getting the object I need in order to call $save(). Can someone please help?

EDIT: I figured out how to get a handle on the form. In the <form name="formname"> element, I added an onshow="myController.setForm(formname)" and in the controller, I store the passed in form object in a field, so I can later have access to it to call $save().

[stillnet]

@dlwhiteman I use code similar to this to close all my x-editable forms when saving. I give each form a class of materialLineForm and then:

    $('.materialLineForm').each(function(index,element) {
        formController = $(element).data().$formController;
            formController.$submit();
        }
    });

[ckosloski]

Is this still an issue?

[Madd0g]

It is quite inconvenient to get a reference to the form in order to close/submit it.

I add this attribute

e-form='{{saveForm($form)}}',

and saveForm just saves the form in my scope variable, so I can later call $submit on it.

The method above that gets the controller from the HTML elements seems like it would work too, but doesn't seem very angular-ish.

I don't know what's the best way to make this happen, I'm using other angular libraries where the same problem exists - the only way to get a reference to something is to use an attribute in the directive, it's really awkward but I don't know of better alternatives.