Angular中字段值无效时ng-class不生效问题排查

嘿，我帮你排查了这段AngularJS代码，导致error类不生效主要有两个核心问题：

1. 动态表单控件的属性访问方式错误 #

当你用ng-repeat动态生成表单控件名称（比如val_{{$index}}）时，直接用点符号（innerForm.val_{{$index}}）访问控件状态是行不通的——Angular会把val_{{$index}}当成一个固定的属性名，而不是解析后的动态字符串。

正确的做法是用方括号语法来访问动态属性，让Angular能正确识别对应索引的控件：

innerForm['val_' + $index].$invalid

2. 缺少验证规则导致$invalid始终为false #

$invalid只有在控件违反验证规则（比如必填、格式错误）时才会变为true。如果你的<input>没有添加任何验证指令，$invalid永远是false，自然不会触发error类。

修正后的完整代码示例 #

<ng-form name="innerForm">
  <table>
    <tbody>
      <tr ng-repeat="value in values">
        <td>
          <!-- 修复动态控件访问方式 + 添加验证规则 -->
          <div class="control-group input-append no-margin" 
               ng-class="{error: innerForm['val_' + $index].$invalid}">
            <input name="val_{{$index}}" 
                   id="val_{{$index}}" 
                   ng-model="value.val" 
                   ng-required="true"> <!-- 示例：添加必填验证 -->
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</ng-form>

额外验证小提示 #

如果你需要其他验证逻辑，可以添加对应的指令：

• 邮箱格式验证：ng-pattern="/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/"
• 数字输入限制：ng-pattern="/^[0-9]+$/"
• 最小长度要求：ng-minlength="3"

当用户输入不符合规则的内容时，innerForm['val_' + $index].$invalid就会变为true，父级<div>就会自动应用error类啦～

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