AngularJS chekbox ng-required

Question

我有一些checkboxes需要checked當用戶clicksubmit按鈕。 我已經插入這個ng-required="cbmemberdoc.checked"但似乎不工作。

，這在提交按鈕的CSS

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

我有這樣的：

ng-disabled="client.$invalid" 

這工作得很好與他人的Fileds像文本框，當用戶通過它沒有任何文本它becames紅色，但而不是複選框

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>