带有括号的输入的AngularJS验证错误

Question

当使用 AngularJS 表单验证时，它可以顺利工作，除了以下部分在使用括号验证选择输入时

<div class="form-group" ng-class="{'has-error': editDorm.classId.$invalid}">
      <div class="col-sm-10">
        <select class="form-control" ng-model="form.classId" name="classId[]" multiple required>
          <option ng-repeat="class in classes" value="{{class.id}}">{{class.className}}</option>
        </select>
      </div>
    </div>

感谢您的帮助。 谢谢

Answer 1

您需要使用bracket 表示法，将带有方括号的元素名称添加为表单控制器中的键，因此您需要将表单控制器实例中的模态实例引用为editDorm['classId[]']。如有疑问，请始终在 html 中打印表单实例，即 {{editDorm}} 将显示 kvp。

即：

 ng-class="{'has-error': editDorm['classId[]'].$invalid}"

angular.module('app', []).run(function($rootScope) {
  $rootScope.classes = [{
    id: 1,
    className: 'class1'
  }, {
    id: 2,
    className: 'class2'
  }];
})

.has-error {
  border: 2px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <form name="editDorm">
    <div class="form-group" ng-class="{'has-error': editDorm['classId[]'].$invalid}">
      <div class="col-sm-10">
        <select class="form-control" ng-model="form.classId" name="classId[]" multiple required>
          <option ng-repeat="class in classes" value="{{class.id}}">{{class.className}}</option>
        </select>
      </div>
    </div>
  </form>
</div>

另一个注意事项：使用 select 的推荐方式是使用 ng-options 而不是 ng-repeat，它很容易使用。

你会这样做：

     <select class="form-control"
              ng-model="form.classId" 
              name="classId[]" 
              ng-options="class.id as class.className for class in classes"
              multiple required>
     </select>