AngularJS 复选框 ng-required

Question

当用户clicksubmit 按钮时，我有一些checkboxes 需要checked。 我已经插入了这个ng-required="cbmemberdoc.checked"，但似乎不起作用。

这在 css 中

 input.ng-invalid.ng-touched {
        border: 2px solid red;
    }

在提交按钮上我有这个：

ng-disabled="client.$invalid"

这适用于其他文件，如文本框，当用户通过它时没有任何文本但不是复选框，它会变成红色

Answer 1

您需要将输入元素包装在span 中，并将边框应用于该span 元素。以下是 CSS 更改。

CSS：

.error-wrapper{
  display:inline-grid;
  border:2px solid transparent;
}
.error{
  border:2px solid red;
}
.error-wrapper input{
  margin:0px;
}

以下是相同的演示。

var app = angular.module('myApp', []);
app.controller('MyController', function MyController($scope) {
  $scope.array = [false, false, false, false, false];
});

.error-wrapper{
  display:inline-grid;
  border:2px solid transparent;
  border-radius:50%;
  padding:2px;
  padding-left:3px;
}
.error{
  border:2px solid red;
  border-radius:50%;
  padding:2px;
  padding-left:3px;
}
.error-wrapper input{
  margin:0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller='MyController' ng-app='myApp'>
  <form name="myForm" novalidate>
    <span class="error-wrapper" ng-class="{'error': myForm.test1.$invalid}">
      <input type="checkbox" ng-model="array[0]" name="test1" required>
    </span>
    <button type="submit" ng-disabled="myForm.$invalid">submit</button>
  </form>
</div>