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.