feat(form): add support for ngFormOptions attribute and form isolation

Child forms propagate always their state to its parent form. Following the pattern of ngModelOptions
a new optional attribute is defined for forms, ngFormOptions that will allow to define now if the form
is isolated from its parent. In the future, if more options are needed this new attribute may be
the place to define them.

Options are exposed in the controller, but the isolated property is read only when the NgFormController
is executed, so the behavior won't change if its value is changed later.

It maybe used like this:

<ng:form name="parent">
  <ng:form name="child" ng-form-options="{isolated:true}">
     <input ng:model="modelA" name="inputA">
     <input ng:model="modelB" name="inputB">
   </ng:form>
</ng:form>

Closes: angular#5858

Author: Gonzalo Ruiz de Villa

src/ng/directive/form.js

@@ -64,7 +64,11 @@ function FormController(element, attrs, $scope, $animate, $interpolate) {
   var form = this,
       controls = [];
 
-  var parentForm = form.$$parentForm = element.parent().controller('form') || nullFormCtrl;
+  form.$options = $scope.$eval(attrs.ngFormOptions) || {};
+
+  var parentForm = form.$$parentForm =
+        (!form.$options.isolated && element.parent().controller('form'))
+        || nullFormCtrl;
 
   // init state
   form.$error = {};
@@ -296,6 +300,10 @@ 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 {Object} ngFormOptions options to apply to the current form.
+ *   - `isolated`: boolean value which indicates that the form should not propagate its state
+ *     to the parent form. By default, child forms are not isolated and propagate their state
+ *     ($dirty, $pristine, $valid, ...) to its parent form.
  *
  */
 

test/ng/directive/formSpec.js

@@ -870,6 +870,43 @@ describe('form', function() {
       expect(scope.form.$submitted).toBe(false);
     });
   });
+
+  describe('ngFormOptions attributes', function() {
+    it('should allow to isolate forms', function() {
+      doc = jqLite(
+        '<ng:form name="parent">' +
+        '<ng:form name="child" ng-form-options="{isolated: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();
+    });
+  });
 });
 
 describe('form animations', function() {
@@ -947,4 +984,5 @@ describe('form animations', function() {
     assertValidAnimation($animate.queue[2], 'addClass', 'ng-valid-custom-error');
     assertValidAnimation($animate.queue[3], 'removeClass', 'ng-invalid-custom-error');
   }));
+
 });