具有可编辑元素的表单应具有 `editable-form` 属性答案

【问题标题】：Form with editable elements should have `editable-form` attribute具有可编辑元素的表单应具有 `editable-form` 属性
【发布时间】：2014-07-28 13:31:55
【问题描述】：

我有一个表单，我在其中使用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">

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>

脚本

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

【问题讨论】：

标签： javascript angularjs x-editable

【解决方案1】：

有几件事要做：

按照错误提示将editable-form 属性添加到表单中。
删除e-form="textBtnForm"，这不是您的要求。
改为将textBtnForm 设置为表单的名称。
将type="button"添加到编辑按钮，否则不起作用（不知道为什么..）。
为了完整起见，我还在编辑时添加了保存和取消按钮。

结果如下所示：

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

希望这会有所帮助。

【讨论】：

感谢您的回答...但真正的问题是在我的实际应用程序中看到有一个主要形式，其中有三个网格。 ..我正在使用 xeditable 表单和三个网格的行编辑....最后这三个网格将在主表单中......当我们在这个主表单中包含 xeditable 时将无法工作....例如，在上面加上另一个表单标签，你已经证明它不起作用我猜......
那么请展示您实际应用程序中代表问题的一部分。我们可以从那里开始寻找是否可能。
我发现只有第一个innner表格不起作用，然后我在顶部添加一个空表格就可以了！至少在 Chrome 中。不确定此解决方法是否适用于跨浏览器，因为嵌套的 form 不是有效的 HTML5。检查这个小提琴：jsfiddle.net/Lw4y9
另一种解决方案是使用ng-form 属性，并在单击保存按钮时通过textBtnForm.$submit() 手动进行提交。检查这个小提琴：jsfiddle.net/U8zL7/1

【解决方案2】：

如果您只想编辑一个元素，您可以删除该表单，这将使其正常工作。或者您必须将ng-click="$form.$show()" 添加到span 元素，如here 所述。

【讨论】：

对此有任何建议
是的，您可以（或应该）删除该表单。然后它就可以工作了，只需在你的 Fiddle 中测试它。更新了我的答案
因为我的用户界面已经有一个可以执行另一个操作的表单......在那个表单内我需要放置这个可编辑的文本字段
我明白了。如果您将 ng-click="$form.$show()" 添加到您的跨度中，它就会开始工作。在这里找到它：github.com/vitalets/angular-xeditable/issues/6
再次更新了答案:) ng-click 对你有用吗？

【解决方案3】：

前面的方法是部分正确的，只有在使用该表单的单个输入时才能应用。此外，如果您尝试添加更多元素，则将无法正常工作。因此，我拥有的正确解决方案是使用带有可编辑表单指令的 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>

【讨论】：