Inside <form> not working

[sarath2]

Following not working..

<form>
   <a href="#" editable-text="user.name">{{ user.name | uppercase }}</a>
</form>

[vitalets]

@sarath2
if you want to have single editable element, there is no need to wrap it into form tag.
If you want to have several editable elements and submit them together, you shoud wrap it into form with editable-form directive:

<form editable-form>
   <a href="#" editable-text="user.name">{{ user.name | uppercase }}</a>
</form>

[sarath2]

Nope. I mean, I have a form inside with varies controls. When I put one xeditable input box inside this form,it not working properly(Not shown text-box when click the link).
Inside div working properly.

[vitalets]

Could you make a jsfiddle to demonstrate the issue?
use this as template http://jsfiddle.net/NfPcH/3

[vitalets]

Closing as too old.
Please feel free to reopen if you still have this issue.

[devmondo]

hi,
sorry to bring this up but i am also facing same thing, i have followed all steps in demo, when i click on an editable element nothing happens

[vitalets]

hi,
please recheck that you added module dependency var app = angular.module("app", ["xeditable"]);
If it's ok but still not working please try starter template: http://vitalets.github.io/angular-xeditable/zip/angular-xeditable-starter.zip

[dsidharta1]

vitalets,

Here's an example: http://jsfiddle.net/eJnT9/1/. In my case, I'm using a form to mainly layout the fields, however, there may be one or two values that I'd like to update in-place.

Thanks for looking into this, and let me know if you need more info.

[dukehoops-zz]

Hi, vitalets:

seeing the same - clicking link on editable-text has no effect if tag is placed inside a form. created a repro using your starter template (but updated AJS to 1.2.9): http://plnkr.co/edit/NgMZ3DydXJKgddJ6gZyt?p=preview

[lionelB]

Hello,

I have the same problem here. I use a form to layout element cause I use a bootstrap3 theme. I understand that editable-form is mandatory for submiting the whole forms, but x-editable should work fine for simple field editing even for fields inside a form.
also your angular x-editable is a great work !

[raniejade]

You have to explicitly call <form-name>.$show() or $form.$show() (if your form has no name attribute) for it to work.

<form editable-form>
   <a ng-click="$form.$show()" href="#" editable-text="user.name">{{ user.name | uppercase }}</a>
</form>

It won't automatically hide, either you need to call $form.$hide().

IMO, the problem here is enforcing forms with editable-* elements to have the editable-form attribute. I can think of some use cases that wont require what editable-form has to offer.

[ryan-kimber]

Same issue - using <form> elements in our application to take advantage of Bootstrap 3 layout, but with editable-form declared on the form, none of my editable-text fields will open up when clicked.

Demonstrated in this plunkr: http://plnkr.co/edit/NgMZ3DydXJKgddJ6gZyt?p=preview

[snario]

Having the same issue, anyone have a fix?

[thejohnfreeman]

Here's a fix, until the library can incorporate this logic internally:

<a href="#" ng-click="$form.$show()" e-ng-blur="$form.$hide()" editable-text="model.value">{{ model.value }}</a>

[snario]

I'm using an editable-select and this does the following:

• doesn't fix the styling issue
• allows me to click on it and the select dropdown appears
• doesn't allow me to save or cancel
  ᐧ

On Fri, Jun 13, 2014 at 11:59 AM, John Freeman notifications@github.com
wrote:

Here's a fix, until the library can incorporate this logic internally:

{{ model.value }}

—
Reply to this email directly or view it on GitHub
#6 (comment)
.

[thejohnfreeman]

Mind giving a minimal example or fiddle?

[snario]

http://plnkr.co/edit/3148OUwbdxe89QRhPyTA?p=preview

Just copied the above plunker from above and moved the select inside the form and added your fix.

[thejohnfreeman]

It's not getting the editable-click class applied, so I'd dig in the code to see where it's failing. I'm not using the editable-select, so I don't have your problem.

[ddasilva]

Also experiencing this problem. @thejohnfreeman's fix does not work for me.

[promolic1]

Hello
I am on the same boat.
Also, the workaround doesn't show the save/cancel buttons.
(And particularly I am interested in getting this working with a table, or at least with the manual trigger example and I am not able to get this workaround working with this use cases).

[bfloydd]

Having the same problem here. As promolic1 said, the workaround doesn't show the save/cancel button, so its out. AngularJS uses "novalidate" on the form tag to enable its own validation, so it might be that xeditable and Angular's form validation are incompatible without modifying the source of angular-xeditable to ignore the form tag.

[promolic1]

At the end, to be able to use this I dropped the outer form to use the inner forms for my tables. Unfortunately this disables the submit on enter function and the form validation.

[bfloydd]

Thanks promolic1. For anyone who might want to use single xeditable form elements (without whole form editing) + use angular's form validation, its currently not possible. They are mutually exclusive at current revision. But with a small hack you can have both right now. In editableDirectiveFactory, look for the block of code following this comment:

// element wrapped by form
if(ctrl[1]) {
..

and add "hasForm = false;" after the else, and there you have it. Of course this will break whole form editing capability of xeditable and it is definitely not a permanent fix

[promolic1]

Thanks @dittonamed I hope to try your idea soon.
But also, the issue with this approach of getting this working, probably is something worse (for some people). I am not fully sure, but having a form inside another form isn't valid HTML.
But well, personally if it works crossbrowser, I will be happy enough.

[KendallPark]

+1

Also having this issue.

[pmuilu]

Just bumped to this very same issue as well. Simply having this does not work:

<form name="form" id="form" action="#" method="POST">
<div class="note"> <p><a href="#" editable-textarea="note" e-rows="7" e-cols="40">#{ note || "Add note" }#</a></p></div>
</form>

[bdhillon]

I am facing same issue:

Some normal fields only one field which is xeditable, but that does not work

Getting following error on web console: Form with editable elements should have editable-form attribute.

I don't want to use editable-form with tag, but just want one field to behave like xeditable. Can't move this field outside form because this comes in middle of form :(

[onlineassociates]

@dittonamed @promolic1 Thank you for the solution. Yes, it works but it breaks the form editable capability. I have modified a bit to work with form edit option.

 hasForm = eFormCtrl.$addEditable;

[phaniram]

Any ETA on this merge?

[mitcht]

Here is the list of things to do. I'm planning on working on them in my spare time...
https://github.com/vitalets/angular-xeditable/milestones

[eugef]

Resolved by #315

[mitcht]

Seriously?

[HariBabuThubati]

@mitcht Yes , please advise me, if i have two rows and i modified all two rows values, myform.$data is having only last row data only . it is not maintaining entire table data in ng-repeate.please adivise me

http://jsfiddle.net/0amredgj/3/

[christandy]

vitalets - Is there a way to do multiple separate editable forms within a single form element? I've got a large form and would like to break it up a bit. Thanks for any help.

[HugCoder]

This still seems to be broken. I tried different hacks and "solutions", including the "e-single" which doesn't seem to do anything. There seems to be workarounds here to get somewhere, but what I want to accomplish is the following:
I have a table with cells (td-tags) containing content I want to use xeditable on, i.e. I don't want to edit the whole row or the whole table at the same time, since this expands the table too big cause of the inputs taking more space than text. I also don't want buttons, I want save on blur (buttons="no" blur="submit"). I only want the element I click on to be editable. This is fine as long as it's not surrounded by a form-tag but when I add it, things start breaking. First of it stops displaying the inputs on click, cause it wants myform.$show() to be called. If it's called it displays all the xeditables, which is what I don't want.

I could just do all validation through onbeforesave="validate($data)" or something like that, but that takes quite a bit of extra code and I would like to use angulars inbuilt features like dirty, pristine, etc., which is only available if you surround everything with form-tag. So, is there a solution to achieve the above?

[dnauck]

Even the latest master branch had this issue :/

+1 for fixing it

[christandy]

What's worked for me is to just nest form elements inside each other. I am well aware that that approach is non-standard, won't validate, and could fairly be called "hackish".

[mitcht]

Just because my commit has been merged does not mean that it has been built into the bower distribution as of the date of this comment. Anyone who knows how this stuff works would know that they can clone the repo, build it locally and use the results from that build on their site. This will make e-single work. If you find yourself bower-installing xeditable and then going "hey e-single isn't working" you need to do your own build on your own machine. Learn this. Contribute. It will take you to the next level.

[HugCoder]

I implemented the e-single fix by simply changing the lines:
// element wrapped by form if (ctrl[1]) { eFormCtrl = ctrl[1]; hasForm = true; }
to
// element wrapped by form if (ctrl[1]) { eFormCtrl = ctrl[1]; if (attrs.eSingle !== undefined) { hasForm = false; } else { hasForm = true; }
Makes it work inside forms without any problem so far. Would be easier to contribute if the author of the project was active. Making 10+ forks or your own build isn't contributing, unless you are prepared to keep it up and develop it.

[mitcht]

You could always ask to be a repo admin :)

[mitcht]

Submitted build as pull req. Fingers crossed.

#422

[mitcht]

#422 merged

bower install angular-xeditable now allows e-single with version 0.1.10

[HugCoder]

Sounds good, but to me it doesn't seem to be implemented in the way we have "fixed" it in the thread. Now it's like this:
"
if(ctrl[1]) {
eFormCtrl = ctrl[1];
hasForm = true;
} else if(attrs.eForm) { // element not wrapped by form, but we have e-form attr
hasForm = attrs.eSingle === undefined;
}
"
This means we still cannot wrap the element in form tag but instead we have to use only e-form. Then we don't get the angular form validation etc. that the form tag provides. I really don't see what problem this implementation solved. At least it didn't solve the original issue discussed in this thread.

[mitcht]

It allows xeditable elements to be used with a standard ng-form element. You can then create your own form, and the elements themselves don't have to validate using the internal e-form validation. Just make sure they have names, and they will show up on your ng-form scope object with validity booleans. This allows you to do things like implement angular-message without having to come up with ways to sidestep the built in validation in xeditable.

[im1dermike]

What a joke that this hasn't been fixed. It makes the plugin completely unusable.

[mitcht]

@HugCoder do you have an open pull req? There doesn't seem to be one. If you create a pull req, i'll merge it.

@im1dermike
#1, i don't see a pull request from you fixing this. #2, angular-xeditable is free, so if you don't like it go somewhere else. #3, There ARE ways to deal with this. For instance you aren't forced to use the validation schemes. I prefer angular-message. I don't bother trying to make angular-xedtiable handle all form stuff, even though it can, but doesn't do it quite as you would expect.

[mohamednagy]

i have a form and i want to edit the only clicked editable controller not all the editable controllers in the form.

[bgsavage]

@mitcht can you provide a code sample of how to use your fix? It sounds like you're saying we should try using ng-form instead of the built in e-form now.

Thanks-

[thejohnfreeman]

Maybe check out ag-grid if you want editable cells in a table.