Nested Forms validation

[aleshchenko]

It would be great to add some optional attribute to form element or div with ng-form attribute which will say that validation errors of current form shouldn't affect validation of parent form.
Here is what I mean:

<div ng-form="parentForm">
  <input...>some valid input</input>
  <div ng-form="childForm" omit-parent-validation="true">
    <input...>some INVALID input</input>
  </div>
</div>

Result:
parentForm.$valid -> true, childForm.$valid -> false
Same logic may be applied for
parentForm.$pristine -> true, childForm.$pristine -> false

[caitp]

This seems like it should be pretty trivial to implement. Care to submit a patch?

[sriram-dev]

What would be an appropriate name for this attribute ? ng-propagate ? ng-isolate ? Any suggestions ?

Probably we would want to prevent the registration of the form in its parent form altogether. I'm thinking: a parent attribute on ngForm, that defaults to the ngForm that is the parent in the DOM (formElement.parent().controller('form') in the current implementation). Then, if one defines the attribute but with a falsy value, it wouldn't register itself in another form (this will prevent all propagation of validation, dirtiness and so on). Could then be used the other way around as well; telling ngForm to register itself in a form that is not the actual parent in the DOM.

[plentz]

related #5037

[91K00]

I wrote a temporary solution, waiting the fix from angular.
I use an attribute directive on the nested form that isolates the interaction ($pristine, $dirty) and validity ($valid, $invalid) from its parent form.

Here is the http://jsfiddle.net/gikoo/qNrFX/

angular.module('isolateForm',[]).directive('isolateForm', [function () {
    return {
        restrict: 'A',
        require: '?form',
        link: function (scope, elm, attrs, ctrl) {
            if (!ctrl) {
                return;
            }

            // Do a copy of the controller
            var ctrlCopy = {};
            angular.copy(ctrl, ctrlCopy);

            // Get the parent of the form
            var parent = elm.parent().controller('form');
            // Remove parent link to the controller
            parent.$removeControl(ctrl);

            // Replace form controller with a "isolated form"
            var isolatedFormCtrl = {
                $setValidity: function (validationToken, isValid, control) {
                    ctrlCopy.$setValidity(validationToken, isValid, control);
                    parent.$setValidity(validationToken, true, ctrl);
                },
                $setDirty: function () {
                    elm.removeClass('ng-pristine').addClass('ng-dirty');
                    ctrl.$dirty = true;
                    ctrl.$pristine = false;
                },
            };
            angular.extend(ctrl, isolatedFormCtrl);
        }
    };
}]);

You can use it like that:

<form name="parent">
    <input type="text" ng-model="outside"/>
    <ng-form name="subform" isolate-form>
        <input type="text" ng-model="inside"/>
    </ng-form>
</form>

[tjwallace]

Another proposed solution: #8917

[ruifortes]

👍

[martinmicunda]

+1

[rodrigopedra]

+1

also: #8917