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>

因此,当任何一个model1model2无效时,.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 回答