使用动态文本区域名称验证表单

Question

我有一个使用 Angular 的验证表单。我想使用动态文本区域名称验证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> 

还有我的问题：

1. 如果您检查{{main.adminArticleReplyForm}}commentReply_{{$index}} 始终是 ng-repeat 中的最后一个 $index，例如，如果数组中的 4 个 cmets 始终是 commentReply_4，但 DOM 中的 textareas 名称是正确的.
2. 我必须将控制器用作 main，但如果我从表单名称中删除 main，一切正常。
3. 总结，{{main.adminArticleReplyForm}} 仅对 ng-repeat 中的最后一个 $index 有效，之前 $indexes 被忽略
4. 这里是每条commentReply_{{$index}} 都是commentReply_2 https://jsfiddle.net/8od25zhb/5/

Answer 1

说明

1. 您不需要通过 index 跟踪它，从而重复最后一个索引
2. 您不需要将main 添加到form，因为表单是重复的，因此请使其独一无二，如果您只想让一个表单不重复；所以我们只使用comment.adminArticleReplyForm 作为表单名称，而main.comments 使用来自控制器的main。
3. 通过这 2 步，您的表单仅验证其中的文本区域。
4. 您不需要为 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>

Answer 2

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

<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>