PoC for Ticket# 13518

When the form is wrapped & unwrapped via jQuery using wrap() & replaceWith() respectively, AngularJS's form related data becomes undefined. However, that is not the case when wrapping/unwrapping is done via native JS.

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.1.3/angular.min.js"></script>
<div ng-app ng-controller="MainCtrl">
    
    <p><strong style="font-weight: bold;">Instructions:</strong> Please click on "Wrap via jQuery.wrap()" to wrap the first form in a div. Then click on "Unwrap via e.parent().replaceWith(e)" which remove the wrapper div. Notice how the AngularJS form-validation binding stops working. Now do the same thing with nativeJS using the second set of buttons. the AngularJS binding does NOT get disturbed.</p>
    <br/>
  <button type="button" ng-click="toggle_form()">Wrap via jQuery.wrap()</button>
  <button type="button" ng-click="unwrap_form()">Unwrap via e.parent().replaceWith(e)</button>
  <div id="form_container">
    <form name="myForm">
      <input ng-model="full_name" type="text" name="full_name" required ng-minlength="5" />
      {{ myForm.full_name.$error }}
    </form>
  </div>
    <hr/>
  <button type="button" ng-click="wrap_form2()">Wrap via native JS</button>
  <button type="button" ng-click="unwrap_form2()">Unwrap via native JS</button>
  <div id="form2_container">
    <form name="myForm2">
      <input ng-model="full_name2" type="text" name="full_name2" required ng-minlength="5" />
      {{ myForm2.full_name2.$error }}
    </form>
  </div>    
</div>

JavaScript

function MainCtrl($scope) {
  $scope.toggle_form = function() {
    $('#form_container').attr('some-random-attribute', 'retained');
    $('#form_container').wrap('<div></div>');
  };
  
  $scope.unwrap_form = function() {
    var e = $('#form_container');
    
    e.parent().replaceWith(e);
  };
  
  $scope.wrap_form2 = function() {
    var c = document.getElementById('form2_container');
    var wrapper = document.createElement('div');
    var parent = c.parentNode;
    parent.insertBefore(wrapper, c);
    parent.removeChild(c);
    wrapper.insertBefore(c, null);
  };
  
  $scope.unwrap_form2 = function() {
    var c = document.getElementById('form2_container');
    var wrapper = c.parentNode;
    var parent = wrapper.parentNode;
//    parent.replaceChild(c, wrapper);
    var next = wrapper.nextSibling;
    parent.removeChild(wrapper);
    parent.insertBefore(c, next);
  };
};