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

由于与问题无关的原因，我无法合并父窗体和子窗体-它们需要是两个单独的文件

---

现在，当用户单击submit按钮时，验证将正确应用于parentForm和childForm。但是，只有父窗体的$submitted标志设置为true，这是有问题的，因为我使用它来触发某些错误消息的显示。我不希望子表单检查父表单是否为$submitted，因为它们是两个独立的文件。我想到的唯一选择是在子窗体上调用submit（）方法$setsubmited（），这很尴尬，因为现在父窗体需要直接引用子窗体。有没有更好的方法将子窗体的$submitted设置为true？

这是我解决这个问题的方法（我打赌有人可以让它更漂亮）

我做了一个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();
                });
            }
        }
    };
})

然后在父表单的控制器中，当表单提交时，我执行这段代码

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

---

作为Meeker解决方案的扩展，您可以通过向父窗体添加手表来隐式实现

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

---

angular的bug追踪器中有一个问题。与此同时，一条评论建议采取这种变通办法：

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

---

我最初使用Scarlz的解决方案，但在我的情况下，我有几个嵌套的

ng表单

s，它们是由

ng if

创建/销毁的

我没有使用

ng show

和处理可能存在的数据，而是修改了Scarlz的解决方案，使用提交事件，而不是查看

表单。$submitted

属性

函数ParentFormThatSubmits（）{
返回{
限制：'E'，
要求：'表格'，
链接：函数（范围、元素、属性、formCtrl）{
元素on（'submit'，function（）{
var submitted=formCtrl.$submitted；
如果（已提交）{
范围：$broadcast（“$submitted”）；
}
});
}
};
}
函数ChildFormThatSubmits（）{
返回{
限制：“EA”，
要求：'表格'，
链接：函数（范围、元素、属性、formCtrl）{
作用域：$on（“$submitted”，function（））{
formCtrl.$setSubmitted（）；
作用域：$apply（）；
});
}
};
}
角度.module（'appModule'）
.directive（'form'，ParentFormThatSubmitted）
.指令（“ngForm”，提交的子表单）这是怎么回事：“触发某些错误消息的显示”？请注意，只有在
formCtrl.$submitted
发生更改时，此选项才起作用。因此，它可能不适用于动态嵌套的
ng表单
。