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}

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

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

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

Angularjs：表单上的$ setDirty（）不会传播到子表单元素

2 个答案: