Controls within regular forms

[hash-bang]

I'm having an issue where I need to use a regular <form/> tag (so I can use ngSubmit, validation, enter key submits etc.) but would still like to use the editable controls individually.

So something like this:

<form>
  <a editable-text="user.name">{{ user.name || 'empty' }}</a>
</form>

Fiddle

Is there a way of having a regular editable control inside a form element without having to enable editing for the entire form at once?

[ckosloski]

I have not been able to get that to work either. Are you trying to manually edit multiple fields at save at once? Not sure what you are looking to get. You can use blur="submit" on an editable to have it submit on enter. You can do validation with onbeforesave

[hash-bang]

I would like to have stand-alone editable controls within a form but not have the 'editable-form' functionality which makes all form items editable or not.

So clicking on the above <a/> should enter editable mode as if it were nested inside a regular <div/> instead of a <form/>.

[ckosloski]

See if this is what you are looking for

[hash-bang]

Its a solution yes, but using $form.$show() and so on makes the entire form editable at once. I'm just after one element being editable at a time. Similar to the stand-alone editable controls (i.e. any component not already inside a form).

Basically my query is why wrapping an element inside a <form> acts differently to wrapping it in a <div>. Is it possible to have a non-editable form so to speak.

[ckosloski]

The forms are meant to be edited all at once. I still don't understand why you need to edit items one at a time for a form. I guess I am not understanding the use case. The example I gave was the only thing I could find searching the issues.

[hash-bang]

The situation is that I have a very very large form containing lots of moving parts. I'm using a form tag because Angular provides various functionality with this - validation, submit managing etc.

Within this large form I have a table of many rows/columns that contains information. Rather than display a lot of input textboxes I thought it would be nicer to use xeditable to allow the table to display as normal text and clicking a cell would allow the user to change that one value.

The problem as I see it is that xeditable has its own conceptual meaning for form which conflicts with Angular. In Angular / HTML a form is a collection of elements that get managed together, validated together and submitted together. I suspect xeditable tries to use the same conceptual 'togetherness' but adds the restriction that if an xeditable component is within a form it can only ever be edited with its peers. In the above example, I could only allow the entire table contents to be edited and not one cell for example.

I would suggest rather than xeditable throwing an error when a component isn't nested inside a form with a 'editable-form' attribute, as it does now, this behaviour should be changed so that it acts as a standalone xeditable component. This would allow the following two scenarios:

Form that can only be edited all at once:
<form editable-form>
    <a editable-text="foo">foo</a>
    <a editable-text="bar">bar</a>
    <a editable-text="baz">baz</a>
</form>

Form where each widget acts as a stand-alone:
<form>
    <a editable-text="foo">foo</a>
    <a editable-text="bar">bar</a>
    <a editable-text="baz">baz</a>
</form>

[ckosloski]

You can try adding e-single to the element. Here is an example. See if that works with what you are trying to do.

[hash-bang]

Ah ha! Yes thats exactly what I'm after.

Is there a list of these e-* attributes somewhere? I realise they effect the downstream style and arn't really 'core' but I can't seem to find them anywhere in the documentation.

[ckosloski]

Everything "should" be in the documentation, unfortunately e-single is not. I will try to add something in the future.

[hash-bang]

Much appreciated. Thanks for all your help.