Angular.js:表单上的$ setDirty()不会传播给子表单元素

Question

我有一个表单,我正在使用Angular.js进行验证,我想在表单的子元素上实用地设置脏状态.但是,子元素在指令中处于隔离范围内.如何从父作用域将该输入元素设置为ng-dirty？

示例代码:

<form name="parentForm">

   <!-- How can I validate an input element inside this directive--> 
   <childDirective required />

</form>

示例儿童指令:

<div>
  <input type="text" ng-form name="childForm" required/>
</div>

Answer 1

找到解决方案:

$scope.parentForm.$error; // type {array}

这是一个表单元素数组,它们是父表单的子元素,因此对于我的问题,我使用以下命令将指令中的子元素设置为dirty:

$scope.parentForm.$error.required[0].$setDirty();

Answer 2

我在 Typescript 中创建了一个实用方法来以更全面的方式处理这个问题。这可以在任何深度的所有元素上 $setDirty 并产生错误。我知道您正在询问问题中的特定领域，但这对于您可能正在解决的某些问题可能是一个更有用的工具。

class AngularFormUtil
{
    static RecursiveSetDirty(form: ng.IFormController)
    {
        form.$setDirty();
        for (let errorProp in form.$error)
        {
            if (!form.$error.hasOwnProperty(errorProp))
                return;

            for (let error of form.$error[errorProp])
            {
                if (error.$setDirty) {
                    AngularFormUtil.RecursiveSetDirty(error);
                }
            }
        }
    }
}

只需插入表格：

AngularFormUtil.RecursiveSetDirty($scope.parentForm);

普通 JS 编译版本：

var AngularFormUtil = (function () {
    function AngularFormUtil() {
    }
    AngularFormUtil.RecursiveSetDirty = function (form) {
        form.$setDirty();
        for (var errorProp in form.$error) {
            if (!form.$error.hasOwnProperty(errorProp))
                return;
            for (var _i = 0, _a = form.$error[errorProp]; _i < _a.length; _i++) {
                var error = _a[_i];
                if (error.$setDirty) {
                    AngularFormUtil.RecursiveSetDirty(error);
                }
            }
        }
    };
    return AngularFormUtil;
}());