Sauter des formulaires imbriqués de validation avec AngularJS

Dans des formes Angulaires peuvent être imbriquées. Cela signifie que la forme extérieure n'est valide que lorsque tous les formulaires enfants sont valides.

Donc il n'y a aucun moyen de faire forme extérieure pour être valide automatiquement (par $valid clé) lorsque l'un d'intérieure non valide.

Essayez d'utiliser error.required

   <h3>Outer form (valid={{!fOuter.txtOuter.$error.required}})</h3>

Démo Violon

Angulaires ngForm docs:

L'autre sens devrait être d'utiliser le contrôleur, comme:

<h3>Outer form (valid={{isOuterFormValid}})</h3>

contrôleur

$scope.isOuterFormValid = true;

//here, add listener on each input and change flag `isOuterFormValid`
... 

J'ai connu le même problème. À l'intérieur d'un format plus grand que je devais avoir un sous-formulaire avec plusieurs champs à ne pas toucher à l'état du formulaire parent.

Voici ma solution: j'ai écrit une directive "null-forme" qui supprime le sous-formulaire dans le formulaire parent et qui n'envoie pas de modifications de l'état de son parent.

angular.module('nullForm',[]).directive('nullForm', [function () {
  return {
    restrict: 'A',
    require: '?form',
    link: function link(scope, element, iAttrs, formController) {

      if (! formController) {
        return;
      }

      //Remove this form from parent controller
      var parentFormController = element.parent().controller('form');
      parentFormController.$removeControl(formController);

      //Replace form controller with a "null-controller"
      var nullFormCtrl = {
        $addControl: angular.noop,
        $removeControl: angular.noop,
        $setValidity: angular.noop,
        $setDirty: angular.noop,
        $setPristine: angular.noop
      };

      angular.extend(formController, nullFormCtrl);
    }
  };
}]);

Vous pouvez alors l'utiliser comme ceci:

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

Tout changement ou négatif de la validation de "l'intérieur" ne prendra pas un effet de "parent".

Il y a un inconvénient, cependant, en raison de cette solution: sous-formulaire n'auront pas d'état ni ses classes CSS comme ng-invalide etc. travail. Pour ce faire, vous auriez besoin de ré-implémenter cette fonctionnalité dans la forme originale-contrôleur.

J'ai trouvé la solution qui fonctionne le mieux était d'Anton.

Réglage de la nullFormCtrl suggéré par mbernath désactive la validation du formulaire enfant (thxs pour le pavage du chemin, bien que...).

La seule modification que j'ai faite a été de la manière la parentForm est accessible. angulaire fournit une méthode pour cela.

JS:

.directive('isolateForm', [function () {
    return {
        restrict: 'A',
        require: '?form',
        link: function link(scope, element, iAttrs, formController) {

            if (!formController) {
                return;
            }

            //Remove this form from parent controller
            formController.$$parentForm.$removeControl(formController)

            var _handler = formController.$setValidity;
            formController.$setValidity = function (validationErrorKey, isValid, cntrl) {
                _handler(validationErrorKey, isValid, cntrl);
                formController.$$parentForm.$setValidity(validationErrorKey, true, this);
            }
        }
    };
}]);

J'ai eu le même problème et le résoudre avec peu de changement dans la copie locale de angular.js fichier lui-même.

En gros, j'ai ajouté une fonction nouvelle à l'FormController comme ci-dessous:

form.$resetParent = function() {
    parentForm = nullFormCtrl;
};

et de personnaliser la directive:

angular.module('myApp').directive('dtIsolatedForm', function () {
    return {
        restrict: 'A',
        require: '?form',
        link: function (scope, element, attrs, formController) {
            if (!formController || !formController.$parentForm) {
                return;
            }

            formController.$resetParent();
        }
    };
});

je voudrais suggérer mbernath la version sans inconvénient

angular.module('yourModule').directive('isolatedForm', [function () {
return {
    restrict: 'A',
    require: '?form',
    link: function link(scope, element, iAttrs, formController) {

        if (!formController) return;

        //Remove this form from parent controller
        var parentFormController = element.parent().controller('form');
        parentFormController.$removeControl(formController);
        //override default behavior
        var _handler = formController.$setValidity;
        formController.$setValidity = function (validationErrorKey, isValid, cntrl) {
            _handler(validationErrorKey, isValid, cntrl);
            parentFormController.$setValidity(validationErrorKey, true, this);
        }
    }
};}]);

Fondamentalement, l'objectif est de séparer la connexion entre les imbrications et effectuer votre propre validation /accéder à la $error objets des formulaires de façon indépendante. Cela peut être fait par l'introduction d'un modelController entre deux des formulaires imbriqués et en permettant à cette modelController pour déterminer si le parent formulaire de contrôleur et de l'enfant forme contrôleur doit être valide /invalide. Ceci peut être réalisé en augmentant le $setValidity(), qui détermine le moment où le formulaire doit aller valide /invalide.

Veuillez trouver mon code dans le plunker lien ci-dessous. J'ai introduit un modèle de contrôleur entre le parent et l'enfant forme. Ici, j'ai résumé les $error
objet de formulaire enfant dans le formulaire parent. Sens, le formulaire parent ne sera pas en mesure de voir quel est le problème avec le formulaire d'enfant, mais il sera annulé quand certaines champ de passe non valide dans le formulaire enfant. Seuls les intermédiaires modelController sait ce que les champs ont des questions dans le formulaire enfant. Cette logique peut être modifié ou
prolongée en fonction de nos besoins. S'il vous plaît laissez-moi savoir si quelqu'un a besoin de plus de précisions en termes de code.

[plnkr]: https://plnkr.co/edit/5gvctSSqmWiEAUE3YUcZ?p=preview