如何从指令访问子ngModel？

Like in this question, I want to add .error on a form field's parent .control-group when scope.$invalid is true.

就像在这个问题中一样，我希望在范围时在表单字段的父.control-group上添加.error。$ invalid为true。

However, hardcoding the form name like in ng-class="{ error: formName.fieldModel.$invalid }" means that I can't reuse this in different forms, plus I'd rather not repeat this declaration everywhere.

但是，在ng-class =“{error：formName.fieldModel。$ invalid}”中对表单名称进行硬编码意味着我不能以不同的形式重用它，而且我不想在任何地方重复这个声明。

I figured that a directive that looks something like this could work:

我认为看起来像这样的指令可以工作：

<div class="control-group" error-on="model1, model2">
  <input ng-model="model1">
  <input ng-model="model2">
</div>

So when either model1 or model2 is not valid, .control-group gets .error added.

因此，当model1或model2无效时，.control-group会添加.error。

My attempt here. Is it possible to access the models from the directive, given the model names?

我的尝试在这里。在给定模型名称的情况下，是否可以从指令访问模型？

If there's a better approach, I'd love to hear it too.

如果有更好的方法，我也很乐意听。

3 个解决方案

#1

I don't think that writing a custom directive is necessery for this use-case as the ng-form directive was created exactly for situations like those. From the directive's documentation:

我不认为编写自定义指令对于这个用例是必要的，因为ng-form指令是为这样的情况创建的。从指令的文档：

It is useful to nest forms, for example if the validity of a sub-group of controls needs to be determined.

嵌套表单很有用，例如，如果需要确定控件子组的有效性。

Taking your code as an example one would write:

以你的代码为例，我会写：

<div class="control-group" ng-class="{ error: myControlGroup1.$invalid }>
  <ng-form name="myControlGroup1">
    <input ng-model="model1">
    <input ng-model="model2">
  </ng-form>
</div>

By using this technique you don't need to repeat expressions used in ng-model and can reuse this fragment inside any form.

通过使用此技术，您不需要重复ng-model中使用的表达式，并且可以在任何形式内重用此片段。

#2

You can also change the markup in the accepted answer to do without the nesting, since ng-form is also a class directive:

您也可以在接受的答案中更改标记，而不进行嵌套，因为ng-form也是一个类指令：

<div class="control-group ng-form" name="controlGroup11" ng-class="{ error: controlGroup1.$invalid }>
  <input ng-model="model1">
  <input ng-model="model2">
</div>

Final solution Fiddle

最终解决方案小提琴

#3

Inside your link function, you can get access to the formController. It has all of the controls. So the following will give your directive access to .$valid:

在链接功能中，您可以访问formController。它具有所有控件。因此，以下内容将使您的指令访问。$ valid：

el.controller('form')[attrs.errorOn].$valid

However, I don't know how to watch that for changes. I tried watching attrs.errorOn (i.e., watch the ng-model property), but the watch doesn't trigger unless a valid value is input (because of the way Angular forms work... unless that value is valid, it is not assigned to the scope property set by ng-model.)

但是，我不知道如何观察变化。我试着看了attrs.errorOn（即，观察ng-model属性），但是除非输入有效值，否则手表不会触发（因为Angular形式的工作方式...除非该值有效，否则不是分配给ng-model设置的范围属性。）

Fiddle.

小提琴。

Maybe someone can take this further...

也许有人可以更进一步......

#1