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

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>

我的问题：

如果您检查 {{main.adminArticleReplyForm}} commentReply_{{$index}} 始终是 ng-repeat 中的最后一个 $index 例如，如果数组中的 4 条评论总是 commentReply_4，但文本区域名称在 DOM 中是正确的。
我必须使用控制器，就我而言 main，但如果我从表单名称中删除 main，一切正常。
总结，{{main.adminArticleReplyForm}} 仅对 ng-repeat 中的最后一个 $index 有效，之前忽略 $indexes
这里是 fiddle 看看每个评论回复_{{$index}} 是 commentReply_2 https://jsfiddle.net/8od25zhb/5/

Answer 1

因为，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>

Answer 2

描述

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

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

Validate form using dynamically textarea name

forms

validation

angularjs

angularjs-ng-repeat