javascript Angular.js：表单上的 $setDirty() 不会传播给子表单元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20710874/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular.js: $setDirty() on form does not propogate to children form elements
提问by Alec Moore
I have a form that I am validating with Angular.js and I want to pragmatically set the dirty state on a child element of a form. However, the child element is in an isolated scope in a directive. How can I set that input element to ng-dirty from the parent scope?
我有一个表单，我正在使用 Angular.js 进行验证，我想务实地在表单的子元素上设置脏状态。但是，子元素在指令中处于隔离范围内。如何从父作用域将该输入元素设置为 ng-dirty？
Example code:
示例代码：
<form name="parentForm">
<!-- How can I validate an input element inside this directive-->
<childDirective required />
</form>
Example Child Directive:
示例子指令：
<div>
<input type="text" ng-form name="childForm" required/>
</div>
采纳答案by Zachary Dow
I made a utility method in Typescript to handle this in a more holistic way. This can $setDirty on all elements with an error at any depth. I know you're asking about a specific field in your question, but this could be a more useful tool for certain problems you may be solving for.
我在 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);
}
}
}
}
}
Just plug in the form:
只需插入表格：
AngularFormUtil.RecursiveSetDirty($scope.parentForm);
Plain JS compiled version:
纯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;
}());
回答by Alec Moore
Found the solution:
找到了解决办法：
$scope.parentForm.$error; // type {array}
This is an array of form elements that are children to the parent form, so for my problem, I set the child element in the directive to dirty using:
这是一个表单元素数组，它们是父表单的子元素，因此对于我的问题，我使用以下命令将指令中的子元素设置为脏元素：
$scope.parentForm.$error.required[0].$setDirty();
