8

就像在这个问题中一样，我想.error在表单字段的父级为真.control-group时添加。scope.$invalid

但是，像 in 这样对表单名称进行硬编码ng-class="{ error: formName.fieldModel.$invalid }"意味着我不能在不同的表单中重用它，而且我不想到处重复这个声明。

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

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

因此，当任何一个model1或model2无效时，.control-group都会被.error添加。

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

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

4

3 回答 3

5

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:

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.

于 2013-04-20T07:18:11.047 回答
2

您还可以更改已接受答案中的标记以不使用嵌套，因为ng-form它也是一个类指令：

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

最终解决方案小提琴

于 2013-04-21T02:12:04.187 回答
1

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

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

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

小提琴。

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

于 2013-04-20T02:14:39.247 回答