在ng-repeat错误行为中的自定义指令内的Angular ng-messages

时间:2016-11-10 18:18:05

标签: html angularjs angularjs-directive angularjs-ng-repeat ng-messages

我遇到了与此相关的问题: Angular JS ng-message inside directive

不幸的是,解决方案对我不起作用,因为我在ng-repeat中使用我的自定义指令。所以现在ng-messages只在满足所有输入的错误条件时才有效。

http://plnkr.co/edit/lJT48bmYvR9DGFliIYDH?p=preview

我已经尝试了很多方法来创建ng-messages条件,但没有正常工作。其中两个你可以在上面的plunker找到:

ng-messages="form.doubleInputLeft.$error"
ng-messages="form['doubleInputRight' + $index].$error" 

请帮帮我, 问候

1 个答案:

答案 0 :(得分:1)

要使input元素在ng-repeat内工作,索引必须作为name属性的一部分包含在内。

    <!-- index must be included in the name attribute --
    <input name="doubleInputLeft" class="form-control ngMessageSample" type="{{inputType}}"  ng-model="modelLeft" ng-minlength="2" ng-maxlength="20" required>
    -->
    <input name="doubleInputLeft{{index}}" class="form-control ngMessageSample" type="{{inputType}}"  ng-model="modelLeft" ng-minlength="2" ng-maxlength="20" required>
    <div ng-messages="form['doubleInputLeft'+index].$error" class="ngMessagesClass" ng-messages-multiple>
      <div ng-message="minlength" class="ngMessageClass"> {{leftInputHeading}} must have at least 2 characters.</div>
      <div ng-message="maxlength" class="ngMessageClass"> {{leftInputHeading}} must have at most 20 characters.</div>
    </div>

否则,重复的元素将具有重复的名称。

DEMO on PLNKR