Set angularjs zagnieżdżone formularzy przekazywanych

Question

Mam zagnieżdżonych angularjs tworzą tak:

<form name="parentForm" ng-submit="submit()"> 
    <input name="parentInput" type="text"> 
    <ng-include src="childForm.html" ng-form="childForm"></ng-include> 
    <button type="submit">Submit</submit> 
</form> 

A oto childForm.html

<input name="childInput" type="text"> 

Ze względów niezwiązane z pytaniem, nie mogę scalenie formularzy nadrzędnych i potomnych - muszą to być dwa oddzielne pliki.

Teraz, gdy użytkownik kliknie przycisk przesyłania, funkcja sprawdzania poprawności jest poprawnie stosowana zarówno dla elementów parentForm, jak i childForm. Jednak tylko formularz nadrzędny ma ustawioną flagę $ submit na wartość true, co jest problematyczne, ponieważ używam go do wywoływania wyświetlania niektórych komunikatów o błędach. Nie chcę, aby formularz dziecka sprawdzał, czy formularz nadrzędny jest przesłany $, ponieważ są to dwa oddzielne pliki. Jedyną opcją, która mi się przydarzyła, jest wywołanie metody submit() $ setSubmitted() w formularzu podrzędnym, co jest niezręczne, ponieważ teraz formularz nadrzędny musi bezpośrednio odwoływać się do formularza podrzędnego. Czy istnieje lepszy sposób na ustawienie wartości true dla formularza dziecka?

Answer 1

To było moje rozwiązanie tego problemu (i założę się, że ktoś może zrobić to ładniej)

zrobiłem dyrektywę ngForm że załączony do słuchacza,

.directive('ngForm', function(){ 
    return { 
     restrict: 'AE', 
     require: 'form', 
     link: function(scope,element,attrs,form){ 
      var parentForm = element.parent().controller('form'); 
      if(parentForm){ 
       scope.$on('parentFormSubmitted',function(event){ 
        form.$setSubmitted(); 
       }); 
      } 
     } 
    }; 
}) 

Następnie w kontroler formularza nadrzędnego I wykonanie tego peice kodu, gdy formularz jest składany

$scope.submit = function(){ 
    $scope.$broadcast('parentFormSubmitted'); 
} 

Answer 2

Jako rozszerzenie rozwiązania Meeker jest, można osiągnąć $broadcast niejawnie dodając zegarek do formularza nadrzędnego:

.directive('form', function() { 
    return { 
    restrict: 'E', 
    require: 'form', 
    link: function(scope, elem, attrs, formCtrl) { 

     scope.$watch(function() { 
     return formCtrl.$submitted; 
     }, function(submitted) { 
     submitted && scope.$broadcast('$submitted'); 
     }); 
    } 
    }; 
}) 

.directive('ngForm', function() { 
    return { 
    restrict: 'EA', 
    require: 'form', 
    link: function(scope, elem, attrs, formCtrl) { 

     scope.$on('$submitted', function() { 
     formCtrl.$setSubmitted(); 
     }); 
    } 
    }; 
}) 

Answer 3

Jest to problem w kątowym za bug tracker dla tego https://github.com/angular/angular.js/issues/10071. Jeden komentarz sugeruje to obejście w międzyczasie:

// sets all children ng-forms submitted (no such default functionality) 
function setSubmitted(form) { 
    form.$setSubmitted(); 
    angular.forEach(form, function(item) { 
     if(item && item.$$parentForm === form && item.$setSubmitted) { 
      setSubmitted(item); 
     } 
    }); 
} 

// so ie. instead of scope.form.$setSubmitted(); use:  
setSubmitted(scope.form); 

jeden problem z tego podejścia jest to, że wszelkie formy dodawane dynamicznie nie skopiuje stan początkowy ich rodziców. Używam tego podczas dodawania formy dynamicznie:

function onNewChildForm (form) { 
    if(form.$$parentForm && form.$$parentForm.$submitted) { 
     setFormSubmitted(form); 
    } 
} 

Answer 4

początkowo stosowane rozwiązanie Scarlz”, ale w mojej sytuacji miałem kilka zagnieżdżonych ng-form s, które są utworzone/zniszczone przez ng-if.

Zamiast używać ng-show i radzenia sobie z ewentualnie istniejących danych, I zmodyfikowane rozwiązanie Scarlz”do używania przedstawić zdarzenia zamiast oglądać nieruchomość

function ParentFormThatSubmits() { 
 
    return { 
 
     restrict: 'E', 
 
     require: 'form', 
 
     link: function(scope, elem, attrs, formCtrl) { 
 
     elem.on('submit', function() { 
 
      var submitted = formCtrl.$submitted; 
 
      if(submitted) { 
 
      scope.$broadcast('$submitted'); 
 
      } 
 
     }); 
 
     } 
 
    }; 
 
    } 
 

 
    function ChildFormThatSubmits() { 
 
    return { 
 
     restrict: 'EA', 
 
     require: 'form', 
 
     link: function(scope, elem, attrs, formCtrl) { 
 
     scope.$on('$submitted', function() { 
 
      formCtrl.$setSubmitted(); 
 
      scope.$apply(); 
 
     }); 
 
     } 
 
    }; 
 
    } 
 

 
    angular.module('appModule') 
 
    .directive('form', ParentFormThatSubmits) 
 
    .directive('ngForm', ChildFormThatSubmits);