扩展 angularjs 表单控制器

Question

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

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

假设，如果我想扩展当前的表单控制器来执行此操作，我应该怎么做？如何添加新方法 $setChildFormsToSubmittedState() ？当然我想在没有 disturbing/touching angular 代码的情况下做到这一点。

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

不知道从哪里开始。

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

扩展 angularjs 表单控制器

extending angularjs form controller

angularjs

angularjs-ng-form