AngularJS循环输入框绑定验证提示span不显示问题排查

我帮你分析下问题根源，然后给你两种可行的解决方案：

问题出在动态name属性的访问方式错误。你给input设置了name="auction_name_account[$index]"，但AngularJS的表单控制器会把这个name当成完整的字符串键（比如"auction_name_account[0]"），而非数组索引项。所以你用sellItem.auction_name_account[$index]去访问控件状态时，根本找不到对应的控件对象，验证提示自然不会显示。

方法一：动态name+括号语法访问控件状态 #

修改input的name属性和验证span的ng-show表达式，用字符串拼接的方式动态访问表单控件：

<form name="sellItem">
  <div data-ng-repeat="n in langInput.values" style="margin-top: 20px; background: #f5f5f5; padding:10px;">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 u-no-padding">
      <label class="sell__label" for="auction_name_account_{{n.selected}}">Główna nazwa Twojej aukcji ({{n.selected }}):</label>
      <div>
        <!-- 生成唯一的动态name，比如auction_name_account_0、auction_name_account_1 -->
        <input type="text" 
               id="auction_name_account_{{n.selected}}" 
               class="form-control" 
               name="auction_name_account_{{$index}}" 
               data-ng-model="inputs.auction_name_account[$index]" 
               data-ng-minlength="10" 
               data-ng-maxlength="60" 
               required />
        <!-- 用括号语法访问动态命名的控件 -->
        <span class="sell__input-text sell__input-text--big-input text-danger" 
              data-ng-show="sellItem['auction_name_account_'+$index].$error.required">Wymagane!</span>
        <span class="sell__input-text sell__input-text--big-input text-danger" 
              data-ng-show="sellItem['auction_name_account_'+$index].$error.minlength">Za krótkie!</span>
        <span class="sell__input-text sell__input-text--big-input text-danger" 
              data-ng-show="sellItem['auction_name_account_'+$index].$error.maxlength">Za długie!</span>
      </div>
    </div>
  </div>
</form>

核心逻辑：

• 给每个input生成唯一的字符串name
• 通过括号语法sellItem['auction_name_account_'+$index]动态访问表单控件对象（点语法无法识别带变量的键名）

方法二：使用ng-form创建独立子表单（更优雅推荐） #

在每个ng-repeat项中嵌入子表单，让每个输入框拥有独立的验证上下文，避免动态name的麻烦：

<form name="sellItem">
  <div data-ng-repeat="n in langInput.values" style="margin-top: 20px; background: #f5f5f5; padding:10px;">
    <!-- 给循环项创建独立子表单 -->
    <ng-form name="itemForm">
      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 u-no-padding">
        <label class="sell__label" for="auction_name_account_{{n.selected}}">Główna nazwa Twojej aukcji ({{n.selected }}):</label>
        <div>
          <!-- 子表单内用固定name即可，无需动态生成 -->
          <input type="text" 
                 id="auction_name_account_{{n.selected}}" 
                 class="form-control" 
                 name="auctionNameAccount" 
                 data-ng-model="inputs.auction_name_account[$index]" 
                 data-ng-minlength="10" 
                 data-ng-maxlength="60" 
                 required />
          <!-- 直接引用子表单的控件状态，逻辑更清晰 -->
          <span class="sell__input-text sell__input-text--big-input text-danger" 
                data-ng-show="itemForm.auctionNameAccount.$error.required">Wymagane!</span>
          <span class="sell__input-text sell__input-text--big-input text-danger" 
                data-ng-show="itemForm.auctionNameAccount.$error.minlength">Za krótkie!</span>
          <span class="sell__input-text sell__input-text--big-input text-danger" 
                data-ng-show="itemForm.auctionNameAccount.$error.maxlength">Za długie!</span>
        </div>
      </div>
    </ng-form>
  </div>
</form>

这种方式的优势：

• 每个子表单itemForm独立隔离，控件name无需动态生成，代码更整洁
• 验证逻辑直观，直接引用子表单的控件状态，降低出错概率

另外，你已经正确初始化了$scope.inputs.auction_name_account = []，这一步没问题，确保了每个输入框绑定到独立的数组元素，不会出现数据共享问题。测试时可以分别触发空值、短文本、长文本场景，验证提示应该就能正常显示了。

内容的提问来源于stack exchange，提问作者BT101