嵌套表格提交

Question

集AngularJS我有一個嵌套的AngularJS形成像這樣：

<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> 

而這裏的childForm.html

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

對於與問題無關的原因，我不能合併父窗體和子窗體 - 它們需要是兩個單獨的文件。

現在，當用戶單擊提交按鈕時，驗證將正確應用於parentForm和childForm。但是，只有父窗體將其$提交標誌設置爲true，這是有問題的，因爲我正在使用它來觸發顯示某些錯誤消息。我不希望子表單檢查父表單是否爲$提交，因爲它們是兩個單獨的文件。我唯一的選擇是讓子表單上的submit（）方法調用$ setSubmitted（），這很尷尬，因爲現在父表單需要直接引用子表單。有沒有更好的方法來將子窗體的$提交爲true？

Answer 1

這是我解決這個問題（我敢打賭，有人可以使這個漂亮）

我做了連接監聽器的ngForm指令，

.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(); 
       }); 
      } 
     } 
    }; 
}) 

然後在父窗體的控制器我執行這個代碼peice的當表單提交

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

Answer 2

隨着米克的解決方案的擴展，你可以通過添加手錶實現$broadcast隱父形式：

.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

有角中的bug跟蹤此https://github.com/angular/angular.js/issues/10071的問題。一項意見建議在此期間，這種解決方法：

// 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); 

的一個問題這種方法是動態地添加任何形式將無法複製他們的父母的初始狀態。動態添加表格時，我使用的是這樣的：

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

Answer 4

我最初使用Scarlz的解決方案，但在我的情況我已經創建的多個嵌套ng-form S /由ng-if破壞。

而不是使用ng-show和處理可能存在的數據，我修改Scarlz」解決方案中使用的提交，而不是看着form.$submitted財產

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);