0

Need to wrap the editable form inside a bootstrap uib-popover-template.

Have tried the editable ui-bootstrap popover approach, but it is not working as expected.

Plunker 1 --> https://plnkr.co/edit/vXeVoFYVU2IU08CF angular-bootstrap approach - Not able show/hide the form

Plunker 2 --> https://plnkr.co/edit/upUFeEeQbxs8VfF5?preview x-editable approach - Not able wrap it inside the popover

<div class="ui-popover-wrapper">
  <a href="#" editable-text="user.name" 
    ng-click="editableForm.$show()">{{user.name || 'empty' }}</a>
</div>

   <form editable-form name="editableForm" onaftersave="saveUser()" ng-show="editableForm.$visible">
    <div>
      <span class="title">DDown1: </span>
      <span editable-select="user.status" e-name="status" e-ng-options="s.value as s.text for s in statuses">
        {{ (statuses | filter:{value: user.status})[0].text || 'Not set' }}
      </span>
    </div>  

    
    <div>
      <!-- editable username (text with validation) -->
      <span class="title">DropDown Date: </span>
      <span editable-date="user.date" onbeforesave="checkDate($data)"
      >{{ (user.date | date: "yyyy-MM-dd") || 'empty' }}</span>
    </div> 
    
    <div>
      <!-- buttons to submit / cancel form -->
      <span ng-show="editableForm.$visible">
        <button type="submit" class="btn btn-primary" ng-disabled="editableForm.$waiting">
          Save
        </button>
        <button type="button" class="btn btn-default" ng-disabled="editableForm.$waiting" ng-click="editableForm.$cancel()">
          Cancel
        </button>
      </span>
    </div>
  </form>
Santosh
  • 875
  • 5
  • 14
  • 33
  • The first Plunker doesn't show the form because it's nested into a ` – derloopkat Oct 06 '21 at 18:44

1 Answers1

2

I have edited your first plunkr: https://plnkr.co/edit/QNKoOd7rZzAiIRJf

You need to pass the id of your template as a string to the bootstrap popover directive:

  uib-popover-template="'myPopoverTemplate.html'"

I also removed this from your code:

ng-show="editableForm.$visible"

I am assuming you want to show the popover on click.

Asen Mitrev
  • 633
  • 3
  • 10
  • The form is being displayed inside the popover, but it is still not editable. What am I missing here? – Santosh Oct 13 '21 at 07:22
  • I've fixed this in the plunkr by removing the
    element. There is a problem with using x-editable fields in forms. Review this issue: https://github.com/vitalets/angular-xeditable/issues/6. If you want angularjs form validation on those fields, you will need to find a workaround. I don't have too much spare time to look for one. For me, this just isn't supported by the library.
     – Asen Mitrev Oct 13 '21 at 10:53