Can xeditable be used with ng-form (nested forms)?

[sunild]

I've created a plunkr which contains a simplified version of the problem I'm facing. We generate a complex form which can show one or more child forms using ng-form.

I'd like to be able to make all elements editable, or ideally make elements in a single ng-form editable. I'm not sure if this is supported or if I'm just doing it wrong.

The plunkr shows two attempts to do this. Ideally, I'd like to be able to make the elements in individual ng-form's editable (as shown in the last example on the plunkr).

Would be happy to work on a pull request, but I might need to some help in getting started. But first and foremost, I'd like to get your thoughts on using ng-form :)

[futurechan]

+1

[bdandy]

+1 current version of xeditable is not able to be used in forms with all of its features

[jmjpro]

+1

[bcaudan]

+1

[squarewave24]

+1

[mcianc]

+1

[rankun203]

+1

[lalitkapoor]

+1

[lalitkapoor]

I might have a solution to this, but I'm not sure how to run the test suite for this repo. Can anyone help w/that please? Thanks!

[sunild]

@lalitkapoor It looks like those tests are using angular-scenario. That's been deprecated since I don't know when, but at least since 2013 when I started w/Angular.

Maybe you can add karma to the project (literally and figuratively) by upgrading it to the Karma test runner, I'm sure the repo owner wouldn't mind such a fix. I took a quick look at the tests, many of them were simply commented out :)

---

On the other hand, I did some poking around and managed to get something running by doing this:

• Install grunt globally, if you haven't already: npm install -g grunt-cli
• npm install in the project
• grunt server
• open a browser and navigate to: http://localhost:8000/test/e2e/dev-test.html

[lalitkapoor]

Hey, I did that locally as well against master, but they all seem to fail. Do you experience this @sunild. Thanks for stepping up to help!

[lalitkapoor]

@Painyjames Hi, this is out of the blue, but I noticed you have commit access to the repo and so I was wondering if you could help me get the tests running locally against master? Thanks

[lalitkapoor]

@vitalets @Painyjames @eugef ping!

[eugef]

@mitcht, could you take a look?

[mitcht]

At 12 EST I will.

[anaisamp]

Hey @lalitkapoor can you share your solution in the meantime? I'm not able to use xeditable form in an asp.net page due to the duplicated form tag. I believe using ngForm would do the trick!

Thanks!

[lalitkapoor]

@anaisamp you can take a look at this branch here: https://github.com/viewthespace/angular-xeditable/tree/use-xeditable-with-existing-forms

here's the commit: https://github.com/viewthespace/angular-xeditable/commit/6fc8488e238243ceb07eb17ae734884057ae0026

concacted version: https://gist.github.com/lalitkapoor/0f84359cf1389239e078

[anaisamp]

Thank you so much @lalitkapoor. Fingers crossed :)

[ckosloski]

@lalitkapoor if your change is working, can you create a pull request?

[ckosloski]

@lalitkapoor I tried making your changes from the commit you posted above, but the changes seem to break the editable form and row examples.

Is there a different commit that contains more changes?

[DarkRayX]

@lalitkapoor your solution not working. I`m kinda made xeditable to work with nested forms, but i dont have time to commit\pull, cause project where it used is currenty under heavy time schedule.

1. add e-form-nested="true" prop to editable element which linked to nested form (ex: div editable-form ng-form )
2. change line ( 1322 for me) - if (ctrl[1]) { ) to if (ctrl[1] && !attrs.eFormNested) {
3. lastly you need to trigger submit event, in my case iv just added 'name-hook="rowform_{{rowIndex}}"' attr to div with ng-form, and added click event for pseudo submit button ( ng-click="submitRow(rowIndex)" ) , which just triggers submit $timeout(function(){ angular.element(document.querySelector('[name-hook="rowform_'+i+'"]')).trigger('submit') })