AngularJS chekbox ng-required

Question

当用户checkboxes checked按钮时，我需要click submit。 我已插入此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;
}

下面是相同的演示。

＆＃13;

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;