Form with editable elements should have `editable-form` attribute

Question

I have a form within which i have used x-editable plugin for editing a text-field. But i am getting the following script error. Can anyone please tell me some solution for this

Form with editable elements should have `editable-form` attribute. <span editable-text="user.name" e-form="textBtnForm" class="ng-scope ng-binding editable"> 

Working Demo

html

<div ng-app='myApp' ng-controller="ArrayController">
    <form action="#" > 
        <span editable-text="user.name" e-form="textBtnForm">
    {{ user.name || 'empty' }}
        </span>
        <button class="btn btn-default" ng-click="textBtnForm.$show()" ng-hide="textBtnForm.$visible">edit
        </button>
    </form>
</div>

script

var app = angular.module('myApp', ["xeditable"]);
app.controller('ArrayController', function ($scope) {
    $scope.test = "manu";
    $scope.user = {
        name: 'awesome user'
    };
});

Answer 1

There are a couple things to do:

1. add the editable-form attribute to the form as the error suggest.
2. remove the e-form="textBtnForm", it's not required for your requirement.
3. instead, set the textBtnForm as a name of the form.
4. add type="button" to the edit button, otherwise it doesn't work (don't know why ..).
5. I've also add save and cancel button when editing for the sake of completeness.

The result would look like this:

<form editable-form name="textBtnForm" action="#"> 
    <span editable-text="user.name">
        {{ user.name || 'empty' }}
    </span>
    <button type="button" class="btn btn-default" ng-click="textBtnForm.$show()" ng-hide="textBtnForm.$visible">
        edit
    </button>
    <span ng-show="textBtnForm.$visible">
        <button type="submit" class="btn btn-primary" ng-disabled="textBtnForm.$waiting">
          Save
        </button>
        <button type="button" class="btn btn-default" ng-disabled="textBtnForm.$waiting" ng-click="textBtnForm.$cancel()">
          Cancel
        </button>
    </span>
</form>

JSFiddle: http://jsfiddle.net/5TZX5/1/

Hope this helps.

Answer 2

If there is just a single element you want to edit, you can remove the form, which will make it work. Or you must add ng-click="$form.$show()" to the span element as described here.

Answer 3

the previous approach is partial correct and can be applied only if use a single input in that form. Also if you try to add more elements, then will not work correct. So the right solution that i have is to use ng-form with editable-form directive as block for each form element (input) that you want apply the xedit plugin, and of course remove editable-form from main form.

the sample based by your code is below:

<div ng-app='myApp' ng-controller="ArrayController">
  <form action="#" >
    <div ng-form editable-form name="textBtnForm">
      <span editable-text="user.name" ng-click="textBtnForm.$show()">{{user.name||'empty'}}</span>
      <span ng-show="textBtnForm.$visible">
        <button type="button" class="btn btn-primary" ng-disabled="textBtnForm.$waiting" ng-click="textBtnForm.$submit()">              Save</button>
        <button type="button" class="btn btn-default" ng-disabled="textBtnForm.$waiting" ng-click="textBtnForm.$cancel()">cancel</button>
    </span>
    </div>

    <hr>second form element<hr>

    <div ng-form editable-form name="textBtnForm2"> 
      <span editable-text="user.phone" ng-click="textBtnForm2.$show()">{{ user.phone || 'empty' }}</span>
      <span ng-show="textBtnForm2.$visible">
        <button type="button" ng-disabled="textBtnForm2.$waiting" ng-click="textBtnForm2.$submit()">Save</button>
        <button type="button" class="btn btn-default" ng-disabled="textBtnForm2.$waiting" ng-click="textBtnForm2.$cancel()">  Cancel</button>
      </span>
    </div>
  </form>
</div>