CODEWITHSUNDEEP
javascriptangularjsx-editable
Biffy
Biffy

Reputation: 871

Form with editable elements should have `editable-form` attribute in angular-x-editable Example Code

I have an issue, when I try the example code provided by x-editable in my own project: When I try this code which works perfectly in the JSFiddle in my own App (only small modifications like the name of the controller), I get this error message:

    Form with editable elements should have `editable-form` attribute. <span class="ng-scope ng-binding editable" editable-text="user.name" e-name="name" e-form="rowform" onbeforesave="checkName($data, user.id)" e-required=""> angular.js:11707:18

Form with editable elements should have `editable-form` attribute. <span class="ng-scope ng-binding editable" editable-select="user.status" e-name="status" e-form="rowform" e-ng-options="s.value as s.text for s in statuses"> angular.js:11707:18

Form with editable elements should have `editable-form` attribute. <span class="ng-scope ng-binding editable" editable-select="user.group" e-name="group" onshow="loadGroups()" e-form="rowform" e-ng-options="g.id as g.text for g in groups"> angular.js:11707:18

Form with editable elements should have `editable-form` attribute. <span class="ng-scope ng-binding editable" editable-text="user.name" e-name="name" e-form="rowform" onbeforesave="checkName($data, user.id)" e-required=""> angular.js:11707:18

Form with editable elements should have `editable-form` attribute. <span class="ng-scope ng-binding editable" editable-select="user.status" e-name="status" e-form="rowform" e-ng-options="s.value as s.text for s in statuses"> angular.js:11707:18

Form with editable elements should have `editable-form` attribute. <span class="ng-scope ng-binding editable" editable-select="user.group" e-name="group" onshow="loadGroups()" e-form="rowform" e-ng-options="g.id as g.text for g in groups"> angular.js:11707:18

Form with editable elements should have `editable-form` attribute. <span class="ng-scope ng-binding editable" editable-text="user.name" e-name="name" e-form="rowform" onbeforesave="checkName($data, user.id)" e-required=""> angular.js:11707:18

Form with editable elements should have `editable-form` attribute. <span class="ng-scope ng-binding editable" editable-select="user.status" e-name="status" e-form="rowform" e-ng-options="s.value as s.text for s in statuses"> angular.js:11707:18

Form with editable elements should have `editable-form` attribute. <span class="ng-scope ng-binding editable" editable-select="user.group" e-name="group" onshow="loadGroups()" e-form="rowform" e-ng-options="g.id as g.text for g in groups">

It prevents me from editing a row in the table

Here is the fiddle I used: http://jsfiddle.net/NfPcH/93/

I read through a whole thread on github regarding this issue but none of the solutions worked for me. How can it be possible that this code works without problems on jsfiddle but not in my project? Can it be a configuration issue? I use the latest version of xeditable through bower.

I would really appreciate if anyone has a tip for me or point me in the right direction.

Upvotes: 2

Views: 2144

Answers (2)

Huy Nguyen
Huy Nguyen

Reputation: 2060

This error can be happened if you use <form editable-form></form> inside another form (nested form). I found solutions follow: issues #157.

Use <div ng-form editable-form></div> instead of normal <form editable-form></form> tag can resolve this issue.

Upvotes: 1

Biffy
Biffy

Reputation: 871

Ok, I solved my problem. If you have a similar issue maybe this helps:

In my app, there was another tag which surrounded most of the site, including the xeditable table. This causes troubles for xeditable. So the error messages were right on point. I solved it by deleting this form. Another approach is to make the outer form editable, too.

So, if you run into the same error messages, be sure to check out your html source code and look for tags.

Upvotes: 6

Related Questions