javascript - Form with editable elements should have `editable-form` attribute - Stack Overflow

admin管理员组

文章数量:1314480

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'
    };
});

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'
    };
});

• javascript
• angularjs
• x-editable

Share Improve this question Follow edited Jul 28, 2014 at 13:34 Huangism 16.4k77 gold badges5050 silver badges7575 bronze badges asked Jul 28, 2014 at 13:31 Alex ManAlex Man 4,8861919 gold badges105105 silver badges188188 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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 pleteness.

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/5TZX5/1/

Hope this helps.

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.

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>

本文标签： javascriptForm with editable elements should have editableform attributeStack Overflow