From 52535c3bf704a9c46aba1c92021987012cfb776a Mon Sep 17 00:00:00 2001
From: Gonzalo Ruiz de Villa <gonzalo.ruizdevilla@adesis.com>
Date: Fri, 21 Nov 2014 12:43:00 -0800
Subject: [PATCH] feat(form): add support for ngFormTopLevel attribute

Child forms propagate always their state to its parent form. A new optional attribute ngFormTopLevel
is defined for forms that will allow to define now if the form should be considered as 'top level', therefore
preventing the propagation of its state to its parent. I

It maybe used like this:

<ng:form name="parent">
  <ng:form name="child" ng-form-top-level="true">
     <input ng:model="modelA" name="inputA">
     <input ng:model="modelB" name="inputB">
   </ng:form>
</ng:form>

Closes: #5858
---
 src/ng/directive/form.js      |  21 +++-
 test/ng/directive/formSpec.js | 177 ++++++++++++++++++++++++++++++++++
 2 files changed, 197 insertions(+), 1 deletion(-)

diff --git a/src/ng/directive/form.js b/src/ng/directive/form.js
index d88b02c5508f..3c3fe3fdd07c 100644
--- a/src/ng/directive/form.js
+++ b/src/ng/directive/form.js
@@ -65,6 +65,8 @@ function FormController(element, attrs, $scope, $animate, $interpolate) {
   var form = this,
       controls = [];
 
+  var topLevel = $scope.$eval(attrs.ngFormTopLevel) || false;
+
   // init state
   form.$error = {};
   form.$$success = {};
@@ -76,6 +78,7 @@ function FormController(element, attrs, $scope, $animate, $interpolate) {
   form.$invalid = false;
   form.$submitted = false;
   form.$$parentForm = nullFormCtrl;
+  form.$$topLevel = topLevel;
 
   /**
    * @ngdoc method
@@ -318,6 +321,9 @@ function FormController(element, attrs, $scope, $animate, $interpolate) {
  *
  * @param {string=} ngForm|name Name of the form. If specified, the form controller will be published into
  *                       related scope, under this name.
+ * @param {boolean} ngFormTopLevel Value which indicates that the form should be considered as a top level
+ *     and that it should not propagate its state to its parent form (if there is one). By default,
+ *     child forms propagate their state ($dirty, $pristine, $valid, ...) to its parent form.
  *
  */
 
@@ -416,6 +422,10 @@ function FormController(element, attrs, $scope, $animate, $interpolate) {
          angular.module('formExample', [])
            .controller('FormController', ['$scope', function($scope) {
              $scope.userType = 'guest';
+             $scope.submitted = false;
+             $scope.submit = function (){
+                $scope.submitted = true;
+             }
            }]);
        </script>
        <style>
@@ -497,18 +507,27 @@ var formDirectiveFactory = function(isNgForm) {
                 event.preventDefault();
               };
 
+              var handleKeypress = function(event) {
+                if (controller.$$topLevel && event.keyCode === 13 && event.target.nodeName === "INPUT") {
+                  event.stopPropagation();
+                  event.preventDefault();
+                }
+              };
+
               formElement[0].addEventListener('submit', handleFormSubmission);
+              formElement[0].addEventListener('keypress', handleKeypress);
 
               // unregister the preventDefault listener so that we don't not leak memory but in a
               // way that will achieve the prevention of the default action.
               formElement.on('$destroy', function() {
                 $timeout(function() {
                   formElement[0].removeEventListener('submit', handleFormSubmission);
+                  formElement[0].removeEventListener('keypress', handleKeypress);
                 }, 0, false);
               });
             }
 
-            var parentFormCtrl = ctrls[1] || controller.$$parentForm;
+            var parentFormCtrl = (!controller.$$topLevel && ctrls[1]) || controller.$$parentForm;
             parentFormCtrl.$addControl(controller);
 
             var setter = nameAttr ? getSetter(controller.$name) : noop;
diff --git a/test/ng/directive/formSpec.js b/test/ng/directive/formSpec.js
index eecce5a5e41a..7ff1fd5f288f 100644
--- a/test/ng/directive/formSpec.js
+++ b/test/ng/directive/formSpec.js
@@ -1176,6 +1176,183 @@ describe('form', function() {
       expect(scope.form.$submitted).toBe(false);
     });
   });
+
+  describe('ngFormTopLevel attribute', function() {
+    it('should allow define a form as top level form', function() {
+      doc = jqLite(
+        '<ng:form name="parent">' +
+        '<ng:form name="child" ng-form-top-level="true">' +
+        '<input ng:model="modelA" name="inputA">' +
+        '<input ng:model="modelB" name="inputB">' +
+        '</ng:form>' +
+        '</ng:form>');
+      $compile(doc)(scope);
+
+      var parent = scope.parent,
+      child = scope.child,
+      inputA = child.inputA,
+      inputB = child.inputB;
+
+      inputA.$setValidity('MyError', false);
+      inputB.$setValidity('MyError', false);
+      expect(parent.$error.MyError).toBeFalsy();
+      expect(child.$error.MyError).toEqual([inputA, inputB]);
+
+      inputA.$setValidity('MyError', true);
+      expect(parent.$error.MyError).toBeFalsy();
+      expect(child.$error.MyError).toEqual([inputB]);
+
+      inputB.$setValidity('MyError', true);
+      expect(parent.$error.MyError).toBeFalsy();
+      expect(child.$error.MyError).toBeFalsy();
+
+      child.$setDirty();
+      expect(parent.$dirty).toBeFalsy();
+
+      child.$setSubmitted();
+      expect(parent.$submitted).toBeFalsy();
+    });
+
+
+
+    it('should stop enter triggered submit from propagating to parent forms', function() {
+      var form = $compile(
+          '<form name="parent">' +
+            '<ng-form name="topLevelForm" ng-form-top-level="true">' +
+              '<input type="text" name="i"/>' +
+            '</ng-form>' +
+          '</form>')(scope);
+      scope.$digest();
+
+      var inputElm = form.find('input').eq(0);
+      var topLevelFormElm = form.find('ng-form').eq(0);
+
+      var parentFormKeypress = jasmine.createSpy('parentFormKeypress');
+      var topLevelFormKeyPress = jasmine.createSpy('topLevelFormKeyPress');
+
+      form.on('keypress', parentFormKeypress);
+      topLevelFormElm.on('keypress', topLevelFormKeyPress);
+
+      browserTrigger(inputElm[0], 'keypress', {bubbles: true, keyCode:13});
+
+      expect(parentFormKeypress).not.toHaveBeenCalled();
+      expect(topLevelFormKeyPress).toHaveBeenCalled();
+
+      dealoc(form);
+    });
+
+
+    it('should chain nested forms as default behaviour', function() {
+      doc = jqLite(
+        '<ng:form name="parent">' +
+        '<ng:form name="child" >' +
+        '<input ng:model="modelA" name="inputA">' +
+        '<input ng:model="modelB" name="inputB">' +
+        '</ng:form>' +
+        '</ng:form>');
+      $compile(doc)(scope);
+
+      var parent = scope.parent,
+      child = scope.child,
+      inputA = child.inputA,
+      inputB = child.inputB;
+
+      inputA.$setValidity('MyError', false);
+      inputB.$setValidity('MyError', false);
+      expect(parent.$error.MyError).toEqual([child]);
+      expect(child.$error.MyError).toEqual([inputA, inputB]);
+
+      inputA.$setValidity('MyError', true);
+      expect(parent.$error.MyError).toEqual([child]);
+      expect(child.$error.MyError).toEqual([inputB]);
+
+      inputB.$setValidity('MyError', true);
+      expect(parent.$error.MyError).toBeFalsy();
+      expect(child.$error.MyError).toBeFalsy();
+
+      child.$setDirty();
+      expect(parent.$dirty).toBeTruthy();
+
+      child.$setSubmitted();
+      expect(parent.$submitted).toBeTruthy();
+    });
+
+    it('should chain nested forms when "ng-form-top-level" is false', function() {
+      doc = jqLite(
+        '<ng:form name="parent">' +
+        '<ng:form name="child"  ng-form-top-level="false">' +
+        '<input ng:model="modelA" name="inputA">' +
+        '<input ng:model="modelB" name="inputB">' +
+        '</ng:form>' +
+        '</ng:form>');
+      $compile(doc)(scope);
+
+      var parent = scope.parent,
+      child = scope.child,
+      inputA = child.inputA,
+      inputB = child.inputB;
+
+      inputA.$setValidity('MyError', false);
+      inputB.$setValidity('MyError', false);
+      expect(parent.$error.MyError).toEqual([child]);
+      expect(child.$error.MyError).toEqual([inputA, inputB]);
+
+      inputA.$setValidity('MyError', true);
+      expect(parent.$error.MyError).toEqual([child]);
+      expect(child.$error.MyError).toEqual([inputB]);
+
+      inputB.$setValidity('MyError', true);
+      expect(parent.$error.MyError).toBeFalsy();
+      expect(child.$error.MyError).toBeFalsy();
+
+      child.$setDirty();
+      expect(parent.$dirty).toBeTruthy();
+
+      child.$setSubmitted();
+      expect(parent.$submitted).toBeTruthy();
+    });
+
+    it('should maintain the default behavior for children of a root form', function() {
+      doc = jqLite(
+        '<ng:form name="parent">' +
+        '<ng:form name="child" ng-form-top-level="true">' +
+        '<ng:form name="grandchild">' +
+        '<input ng:model="modelA" name="inputA">' +
+        '<input ng:model="modelB" name="inputB">' +
+        '</ng:form>' +
+        '</ng:form>' +
+        '</ng:form>');
+      $compile(doc)(scope);
+
+      var parent = scope.parent,
+      child = scope.child,
+      grandchild = scope.grandchild,
+      inputA = grandchild.inputA,
+      inputB = grandchild.inputB;
+
+      inputA.$setValidity('MyError', false);
+      inputB.$setValidity('MyError', false);
+      expect(parent.$error.MyError).toBeFalsy();
+      expect(child.$error.MyError).toEqual([grandchild]);
+      expect(grandchild.$error.MyError).toEqual([inputA, inputB]);
+
+      inputA.$setValidity('MyError', true);
+      expect(parent.$error.MyError).toBeFalsy();
+      expect(child.$error.MyError).toEqual([grandchild]);
+      expect(grandchild.$error.MyError).toEqual([inputB]);
+
+      inputB.$setValidity('MyError', true);
+      expect(parent.$error.MyError).toBeFalsy();
+      expect(child.$error.MyError).toBeFalsy();
+      expect(grandchild.$error.MyError).toBeFalsy();
+
+      child.$setDirty();
+      expect(parent.$dirty).toBeFalsy();
+
+      child.$setSubmitted();
+      expect(parent.$submitted).toBeFalsy();
+    });
+  });
 });
 
 describe('form animations', function() {