Форма с редактируемыми элементами должна иметь атрибут editable-form.

У меня есть форма, в которой я использовал 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">

Рабочая демонстрация

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
person Alex Man    schedule 28.07.2014    source источник

Ответы (3)


arrow_upward
4
arrow_downward

Есть пара вещей, которые нужно сделать:

  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/

Надеюсь это поможет.

person runTarm    schedule 30.07.2014
comment
Спасибо за ответ ... но настоящая проблема заключается в том, что в моем реальном приложении есть основная форма, в которой есть три сетки. ..и я использую редактируемую форму с редактированием строки для трех сеток .... и, наконец, эти три сетки будут внутри основной формы ... когда мы включим в эту основную форму, редактируемая форма не будет работать .... например, включите другой тег формы поверх приведенного выше, который, как вы показали, не будет работать, я думаю ... - person Alex Man; 30.07.2014
comment
Затем, пожалуйста, покажите часть вашего фактического приложения, которая представляет проблему. Мы могли бы начать с этого, чтобы выяснить, возможно это или нет. - person runTarm; 30.07.2014
comment
Я обнаружил, что только первая внутренняя форма не работает, затем я просто добавляю пустую форму вверху, и все работает! как минимум в Chrome. Не уверен, что этот обходной путь будет работать в разных браузерах, поскольку вложенный form не является допустимым HTML5. Проверьте эту скрипку: jsfiddle.net/Lw4y9 - person runTarm; 31.07.2014
comment
Другое решение - использовать вместо этого атрибут ng-form и выполнить отправку вручную с помощью textBtnForm.$submit() при нажатии кнопки сохранения. Проверьте эту скрипку: jsfiddle.net/U8zL7/1 - person runTarm; 31.07.2014

arrow_upward
1
arrow_downward

Если есть только один элемент, который вы хотите отредактировать, вы можете удалить форму, чтобы она заработала. Или вы должны добавить ng-click="$form.$show()" к элементу span, как описано здесь.

person David Bohunek    schedule 28.07.2014
comment
любые предложения относительно этого - person Alex Man; 28.07.2014
comment
Да, вы можете (или должны) удалить форму. Тогда он работает, просто протестировал его на своей скрипке. Обновил мой ответ - person David Bohunek; 28.07.2014
comment
поскольку в моем пользовательском интерфейсе уже есть форма, которая выполняет другое действие .... внутри этой формы мне нужно разместить это редактируемое текстовое поле - person Alex Man; 28.07.2014
comment
Понятно. Если вы добавите ng-click = $ form. $ Show (), он будет отмечен в вашем диапазоне, он начнет работать. Нашел здесь: github.com/vitalets/angular-xeditable/issues/6 - person David Bohunek; 28.07.2014
comment
Обновил ответ еще раз :) У вас с этим ng-click работает? - person David Bohunek; 28.07.2014
comment
видите, это мой оригинальный рабочий jsfiddle (jsfiddle.net/55GEL), который не имеет никакой формы ... но когда я добавляю ng-click="$form.$show()" в span (jsfiddle.net/6SUAn) функциональность изменяется - person Alex Man; 28.07.2014
comment
Боюсь, вы не можете сочетать атрибут электронной формы с формой. - person David Bohunek; 28.07.2014
comment
Давайте продолжим это обсуждение в чате. - person Alex Man; 28.07.2014

arrow_upward
0
arrow_downward

предыдущий подход является частично правильным и может применяться только при использовании одного ввода в этой форме. Также, если вы попытаетесь добавить больше элементов, то работать будет некорректно. Итак, правильное решение, которое у меня есть, - использовать ng-form с директивой editable-form в качестве блока для каждого элемента формы (ввода), к которому вы хотите применить плагин xedit, и, конечно же, удалить editable-form из основной формы.

образец, основанный на вашем коде, приведен ниже:

<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>
person Victor Orletchi    schedule 30.03.2017