具有可编辑元素的表单应该具有' edit - Form '属性

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

本文关键字：属性 Form edit 编辑 元素 表单      更新时间：2023-09-26

我有一个使用x-editable插件编辑文本字段的表单。但我得到以下脚本错误。有谁能告诉我一些解决办法吗? 

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

<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>
脚本

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

有两件事要做:

  1. 根据错误提示将editable-form属性添加到表单中。
  2. 删除e-form="textBtnForm"，这不是你需要的。
  3. 将textBtnForm设置为表单的名称。
  4. 添加type="button"编辑按钮，否则它不工作(不知道为什么…)。
  5. 我还添加了保存和取消按钮时，为了完整性的编辑。

结果如下所示:

<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/

如果只有一个元素需要编辑，可以删除表单，这样就可以正常工作了。或者您必须像这里描述的那样将ng-click="$form.$show()"添加到span元素。

前面的方法是部分正确的，只有在该表单中使用单个输入时才能应用。此外，如果你试图添加更多的元素，那么将无法正确工作。所以，我有正确的解决方案是使用ng-form与可编辑的形式指令块为每个表单元素(输入)，你想要应用xedit插件，当然从主表单中删除可编辑的形式。

基于代码的示例如下:

<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>
相关文章：