Question

我正在尝试创建一个xeditable表单，如下所示：https://vitalets.github.io/angular-xeditable/#editable-form。

我完全按照说明操作，但我的表格不起作用。我想保存一个资源，但是当我单击应该显示表单的Edit按钮时，它似乎跳过编辑阶段并立即触发saveResource函数 - 这应该只在表单获得保存时发生。

我已经一次又一次地将我的代码与文档进行了比较，并且无法解决我的错误。

HTML

  <form editable-form name="editResourceForm" onaftersave="saveResource()">
    <p>
      <strong editable-text="resource.title" e-name="title">
        {{resource.title}}
      </strong>
    </p>
    <div class="col-xs-12 col-sm-4">
      <button ng-click="editResourceForm.$show()" ng-show="!editResourceForm.$visible">Edit</button>
      <!-- buttons to submit / cancel form -->
      <span ng-show="editResourceForm.$visible">
        <button type="submit" class="btn btn-primary" ng-disabled="editResourceForm.$waiting">Save</button>
        <button type="button" class="btn btn-default" ng-disabled="editResourceForm.$waiting" ng-click="editResourceForm.$cancel()">Cancel</button>
      </span>
    </div>
  </form>

JS

app.controller('Ctrl', function($scope, $filter) {
  $scope.resource = {
    title: 'awesome resource'
  };

  $scope.saveResource = function() {
    console.log("Save resource");
  }

});

JSFIDDLE HERE

您可以看到它正在尝试保存表单，因为每次单击“编辑”按钮时，控制台都会记录＆＃34;保存资源＆＃34;。单击编辑按钮时不会发生这种情况。

Answer 1

@ckosloski在Github上回答了这个问题：

我认为这是因为您的编辑按钮未指定按钮类型。默认情况下，按钮类型是提交。所以你点击了按钮，它提交表单，因为它是一个提交按钮。尝试将type="button"添加到您的修改按钮。

添加此解决方案，正如您从更新的JSFiddle中看到的那样。

可编辑表单即使不显示它也可以保存表单

1 个答案: