Question

我有一个使用角度的验证表单。我想使用动态textarea名称验证ng-repeat中的表单。看看我的代码：

<div ng-repeat="comment in comments track by $index">
  <form name="main.adminArticleReplyForm" novalidate>                                                   
    <div ng-class="{'has-success':(main.adminArticleReplyForm.commentReply_{{$index}}.$valid), 'has-error':(!main.adminArticleReplyForm.commentReply_{{$index}}.$valid)}"> 
      <textarea name="commentReply_{{$index}}" ng-model="main.commentReply[$index]" required></textarea>
      <ul ng-show="(!main.adminArticleReplyForm.commentReply_{{comment.number}}.$pristine && main.adminArticleReplyForm.$error.minlength[0].$viewValue.length)">
        <li>You have to add {{10 - main.adminArticleReplyForm.$error.minlength[0].$viewValue.length}} characters</li>   
      </ul>  
      <button type="submit">Submit</button>
    </div>
  </form>
</div>

我的问题：

如果您检查{{main.adminArticleReplyForm}} commentReply _ {{$ index}}始终是ng-repeat中的最后一个$ index，例如，如果表单中数组中的4个注释始终为commentReply_4，但textareas名称在{ {1}}是正确的。
我必须使用控制器，在我的情况下DOM，但是如果我从表单名称中删除main，那么一切都很顺利。
摘要，main仅对ng-repeat中的最后一个$ index进行验证，以前忽略$ index
以下是每个评论回复_ {{$ index}}为commentReply_2 https://jsfiddle.net/8od25zhb/5/

Answer 1

由于AngularJS默认验证适用于元素名称的层次结构以检测其状态，因此您使用的textarea名称为commentReply_{{$index}}，带有下划线，但您使用的是commentReply{{comment.number}}验证表达式。所以用下划线看看它会起作用。所以，最终代码看起来像这样：

＆＃13;

<div ng-repeat="comment in comments track by $index">
  <form name="main.adminArticleReplyForm" novalidate>                                                   
    <div ng-class="{'has-success':(main.adminArticleReplyForm.commentReply_{{$index}}.$valid), 'has-error':(!main.adminArticleReplyForm.commentReply_{{$index}}.$valid)}"> 
      <textarea name="commentReply_{{$index}}" ng-model="main.commentReply[$index]" required></textarea>
      <ul ng-show="(!main.adminArticleReplyForm.commentReply_{{comment.number}}.$pristine && main.adminArticleReplyForm.$error.minlength[0].$viewValue.length)">
        <li>You have to add {{10 - main.adminArticleReplyForm.$error.minlength[0].$viewValue.length}} characters</li>   
      </ul>  
      <button type="submit">Submit</button>
    </div>
  </form>
</div>

＆＃13;

Answer 2

<强>描述

您无需通过index跟踪重复最后一个索引
您不需要将main添加到form，因为表单是重复的，所以如果您只想让一个表单重复，则将其设置为唯一;所以我们只使用comment.adminArticleReplyForm作为表单名称，而main.comments只使用来自控制器的main。
通过这两步，您的表单只会验证其中的textarea。
您不需要为textarea创建唯一的名称和模型，因为您在ng-repeat内创建它们并且都是唯一的。

<div ng-app="app" ng-controller="ctrl as main">
    <div ng-repeat="comment in main.comments">
        <form name="comment.adminArticleReplyForm" novalidate>
            {{comment.adminArticleReplyForm}}
            <div>
                <textarea name="commentReply" ng-model="comment.commentReply" required></textarea>
                <button type="submit">Submit</button>
            </div>
        </form>
        <hr/>
    </div> 
</div>

使用动态textarea名称验证表单

2 个答案: