3

我有一个指令，我在其中创建了许多ng-form's 并根据$index（来自ng-repeat）命名每个表单。我的问题是，当表单无效但我找不到如何正确引用表单时，我想显示一个错误容器（包含错误消息） 。

这是我的代码：

<ng-form name="innerForm{{$index}}">

    <label ... ><input name="input" ... />

        <div class="error-container" ng-show="'innerForm'+$index.input.$invalid">
               // show the error message
        </div>

</ng-form>

例如，我想'innerForm'+$index.input.$invalid被评估innerForm5.input.$invalid。

我做了很多尝试，但我无法让它工作。引用我的动态命名表单的正确方法是什么？

4

2 回答 2

5

请看这里：http: //jsbin.com/jocane/4/edit

 <div ng-controller="firstCtrl">
  <div ng-repeat="object in allMyObjects">
    <ng-form name="innerForm{{$index}}">
  <input type="text"  ng-model="object.name" required name="userName">

      <div ng-show="{{'innerForm'+$index}}.userName.$invalid">
               error
        </div>
      </form>

    </div>
于 2014-07-25T11:18:50.347 回答
0

首先，ng-form 创建了一个孤立的范围。所以如果你给一个 ng-form 静态名称，就可以了。无需附加 $index 或任何东西。

ng-show="innerForm.input.$invalid"

使用元素查找表单控制器的代码片段

  var elmParent = $(domEle).parents('form, ng-form, [ng-form]');
    var formCtrl = null;
    var elemCtrl = null;
    if (elmParent.length) {
    var elm = angular.element(domEle);
        formCtrl = elm.scope().$parent[elmParent.attr('name') || elmParent.attr('ng-form')];
    }

希望这会有所帮助

于 2014-07-25T11:24:30.990 回答