Expand collapsed arrays on schema validation error

[deyceg]

Maybe not an issue; but curious to if anyones done something similar/has any ideas.

I've created a custom array type that uses bootstrap accordions. Works great. However, when the submit button validates the form, the accordion remains collapsed even though it contains invalid form fields

I would like to somehow get the offending accordion to automatically expand.

I thought about creating an attr directive that sits on the accordion that listens for an event, and has access to the AccordionController from bootstrap. With the $index I could call toggleOpen().

Thoughts?

[davidlgj]

Interesting... maybe you could wrap each accordions fields inside an ng-form, I haven't tried it, but I understand they can be nested? Then you could get validation status directly from the form controller and maybe do something with that. Sounds cool!

[deyceg]

Funnily enough @davidlgj I was just coming back to let you know how I got on. And thats exactly what I did.

Heres the gist

https://gist.github.com/deyceg/84cd2428a6c8291de66a

awesome work btw!

[davidlgj]

👍 Nice! Love to see an add-on of it if you get time ;)

[deyceg]

@davidlgj Definately! It'll be the weekend after easter though as I'm a little snowed under with a client at the moment with a deadline approaching!

I have a couple of other useful extensions too but I'll keep those a surprise!

[davidlgj]

Ooooh cool! let, me now if I can help!

[deyceg]

@davidlgj Didn't want to create a new issue, but have some additional discussion along similar lines.

I'm working on an modal type where we can take a fieldset out of the form and place it inside a modal window with its own schema-form lifecycle. Must admit I havent got very far yet although I did something similar with my own form controls a while back without the desired flexibility we'd need here though.

My current trail of thought is to wait for the fieldset to be rendered, then move the dom element into the modal whilst somehow keeping it bound to the original scope (read: transclusion).

The issues I'm running into however are two-fold:

1. Angular-UIs bootstrap modal accepts a $scope parameter for $modal.open(), but it creates a child scope of this scope, rather than binding the template to the sf-decorator scope.

2. Accessing the model passed into schema-form. I can't seem to locate it anywhere although I might just be looking in the wrong place. I was hoping it was on the $parent of the sf-decorator scope.

Any ideas/thoughts appreciated :)

[davidlgj]

Why not just render the form again inside the modal and then hide the other? Since they both bind against the same model that should work. Moving the DOM nodes around seems tricky... sorry I don't think I have any better answer :)

[Anthropic]

@deyceg how did you go with this one, did you ever get a chance to make an add on? #800 just got added by someone looking for a solution to use.

[deyceg]

@Anthropic I did create schema-form-modal although I havent published it! Heres the component:

'use strict';

angular
  .module('schema-form-modal')
  .directive('sfModal', modal)
  .directive('sfTransclude', function ($compile) {
    return {
      restrict: 'A',
      transclude: true,
      link: function ($scope, $element, $attrs, controller, $transclude) {
        $transclude($scope.$parent, function (clone, scope) {
          $element.empty();
          $element.append(clone);
        });
      }
    }
  })
  .controller('ModalCtrl', ModalCtrl);

function modal($compile, $modal) {
  var modalTmpl =
    '<div>'+
    '<div class="modal-header">'+
    '<i class="schema-form-modal-close" ng-click="close()"><span>Close</span></i>'+
    '</div>'+
    '<div class="modal-body" sf-transclude>' +
    '</div>'+
    '<div class="modal-footer">'+
    '<button type="button" class="schema-form-modal-submit" ng-click="submit()"><span>Submit</span></button>'+
    '</div>'+
    '</div>';

  var ddo = {
    scope: false,
    compile: compiler
  };

  return ddo;

  ///////////

  function compiler(element) {
    //remove contents of sf-decorator and insert into modal
    var children = element.children();

    // Wrap the children in our template
    var tmpl = angular.element(modalTmpl);
    tmpl.find('.modal-body').append(children);

    return linker;

    function linker(scope, elem, attrs, controller, transcludeFn) {
      var form = scope.$eval(attrs.wwModal);

      scope.btnText = !!form ? form.title : 'Open';
      scope.open = openModal;

      var openBtn = $compile('<button type="button" class="schema-form-modal-open" ng-click="open()">{{btnText}}</button>')(scope);

      //Add button to sf-decorator
      elem.append(openBtn);

      function openModal() {
        scope.modalInstance = $modal.open({
          template: tmpl.html(),
          scope: scope,
          controller: 'ModalCtrl',
          backdrop: 'static',
          windowClass: form ? form.modalClass : ''
        });
      }
    }
  }
}

function ModalCtrl($scope, $modalInstance) {
  $scope.close = closeModal;

  $scope.submit = submit;

  function closeModal() {
    $modalInstance.dismiss(1); //do nothing
  }

  function submit() {
    $modalInstance.close(0);
  }
}

Whoops, this is why I properly should have opened a new issue! You were referencing the accordion issue :)

I didnt publish anything but I did get it working but creating two components and using ui bootstraps accordion component.

Gist:

https://gist.github.com/deyceg/6a3bfe870f258ef839b3aaf6b1c5a912

[Anthropic]

@deyceg thanks for that! :)

[deyceg]

@Anthropic No problem! FYI I was using 0.8.x of schema-form!

[shaun-here]

Can any help me integrating and using https://gist.github.com/deyceg/6a3bfe870f258ef839b3aaf6b1c5a912 in my project?