向angular中的自定义指令添加表单验证

Question

我知道之前曾有人问过这个问题，但我不知道如何在我的问题中实施解决办法。 我在angular中有一个三态布尔指令，我不确定如何向指令添加验证状态，以便表单可以看到我该值有效（不是null）

app.directive('customBoolean', function(){
    return {
    restrict: 'E',
    replace: true,
    scope: {
        boolValue: '=',
        required: '@'
    },
    template: '<button class="btn btn-default btn-xs" ng-click="toggle()" style="width: 70px">{{ boolValue | bool_to_string }}</button>',
    controller: function ($scope, $element){

    $scope.toggle = function(){
        if ($scope.boolValue == null)
        { $scope.boolValue = true; }
        else if ($scope.boolValue == true)
        { $scope.boolValue = false; }
        else { $scope.boolValue = $scope.required ? true  : undefined; }
    };
  }
 }
});

下面是我到目前为止所拥有的plnkr链接。 有人有想法么？

plnkr链接

Answer 1

使用ngModel而不是boolValue。 在指令中require ngModel，然后使用$ setValidity设置有效性。

app.directive('customBoolean', function(){
return {
restrict: 'E',
require : 'ngModel'
replace: true,
scope: {
    boolValue: '=',
    required: '@'
},
template: '<button class="btn btn-default btn-xs" ng-click="toggle()" style="width: 70px">{{ boolValue | bool_to_string }}</button>',
link: function ($scope, $element,$attrs,ngModel){
if (//your invalid conditions){
  ngModel.$setValidity(attrs.ngModel,true/false);
}
$scope.toggle = function(){
    if ($scope.boolValue == null)
    { $scope.boolValue = true; }
    else if ($scope.boolValue == true)
    { $scope.boolValue = false; }
    else { $scope.boolValue = $scope.required ? true  : undefined; }
};
}}});