将AngularJS嵌套表单设置为已提交

Question

我有一个嵌套的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.但是,只有父表单将其$ submitted标志设置为true,这是有问题的,因为我使用它来触发某些错误消息的显示.如果父表单是$ submit,我不希望子表单检查,因为它们是两个单独的文件.我遇到的唯一选择是让child()方法在子窗体上调用$ setSubmitted(),这是很尴尬的,因为现在父窗体需要直接引用子窗体.是否有更好的方法将子表单的$提交为true？

Answer 1

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

Answer 2

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

我制作了一个附加监听器的 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');
}