扩展 angularjs 表单控制器答案

【问题标题】：extending angularjs form controller扩展 angularjs 表单控制器
【发布时间】：2015-01-03 05:18:44
【问题描述】：

我有多个子 ng-form，它们是父 ng-form 的一部分，当我将父 ng-form 设置为 $submitted 状态时，我想设置所有子表单的 $submitted 状态。

到目前为止，表单控制器上没有这样的方法可用，检查here

比方说，如果我想扩展当前的表单控制器来做到这一点，我应该怎么做？如何添加新方法 $setChildFormsToSubmittedState() ？当然我想在不干扰/触摸角码的情况下做到这一点。

有可能吗？我认为应该使用$addControl(); 将所有子表单挂钩到父表单。

不知道从哪里开始。

【问题讨论】：

制作一个指令，并在此处附加监听器以供父表单提交..

标签： angularjs angularjs-ng-form

【解决方案1】：

您可以创建一个指令，将功能附加到表单控制器。只需通过检查项目是否具有与其所属的表单对象相等的$$parentForm 属性来创建一个迭代所有控件的方法。

DEMO

Javascript

  .directive('myForm', function() {

    return {
      require: 'form',
      link: function(scope, elem, attr, form) {
        form.__setSubmitted = function() {
          setSubmitted(form);
        };

        function setSubmitted(form) {
          form.$submitted = true;
          angular.forEach(form, function(item) {
            if(item && item.$$parentForm === form) {
              setSubmitted(item);
            }
          });
        }
      }
    };

  });

HTML

<form name="myForm" my-form ng-submit="myForm.__setSubmitted()">
  <ng-form name="mySubForm1">
    <input type="text" ng-model="data.something1" name="something">
    {{mySubForm1.$submitted}}
  </ng-form>
  <br>

  <ng-form name="mySubForm2">
    <input type="text" ng-model="data.something2" name="something">
    {{mySubForm2.$submitted}}
  </ng-form>
  <br>

  <button type="submit">Button</button>
  {{myForm.$submitted}}
</form>

【讨论】：

它有效，只需一个查询。为什么angular.forEach(form,。 form 是一个对象，那我们为什么需要 forEach 呢？
AngularJS docuemntation states:angular.forEach，为obj集合中的每个项目调用一次迭代器函数，可以是对象也可以是数组。
好的，所以你的意思是，form 有时可以被收集，因此我们需要 forEach。
form 控制器是一个包含controls 和ngModels 集合的对象。