Question

我知道之前已经问过这个问题，但我不知道如何在我的问题中实现asnwers。我有角度的三态布尔指令，我不知道如何向指令添加验证状态，以便表单可以看到值为有效（非空）

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 link

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

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

1 个答案: