Вызов $ setValidity внутри $ formatters

Question

У меня есть директива, используемая с select. Он гарантирует, что выбранный объект, привязанный к select, обладает свойством.

bxUi.directive('bxHasOwnProperty', function() { 
    return { 
     require: 'ngModel', 
     link: function (scope, element, attrs, modelCtrl) { 

      function validate(viewValue) { 
       var prop = attrs.bxHasOwnProperty; 
       if (viewValue && prop && viewValue[prop] && viewValue[prop] !== "") { 
        modelCtrl.$setValidity('required', true); 
       } else { 
        modelCtrl.$setValidity('required', false); 
       } 

       return viewValue; 
      } 

      modelCtrl.$parsers.unshift(validate); 
      modelCtrl.$formatters.push(validate); 
     } 
    }; 
}); 

Пример использования будет:

<select name="city" ng-model="city" ng-options="c.name for c in vm.cities" bx-has-own-property="name"></select>

Так как результат, если пользователь выбирает город без имени, required проверка потерпит неудачу.

Что я не уверен, что я сделал правильно, так это то, что валидатор & использует ту же реализацию, в частности, что в обоих случаях используется $setValidity. Это работает, но я не уверен, что это правильно. Я думал о полном удалении modelCtrl.$formatters.push(validate);, но когда я это сделал, есть побочный эффект. Если я смогу установить модель в контроллере в город без имени (например, {}), то валидатор required не установлен, и я не вижу обратной связи с пользовательским интерфейсом.

Answer 1

Вы можете позвонить по телефону $setValidity в пределах $parsers/$formatters. Однако в большинстве случаев должно быть достаточно использовать коллекции modelCtrl.$validators и modelCtrl.$asyncValidators, которые автоматически вызовут $setValidity.

Попробуйте это:

bxUi.directive('bxHasOwnProperty', function() { 
    return { 
     require: 'ngModel', 
     link: function (scope, element, attrs, modelCtrl) { 
      modelCtrl.$validators.required = function (modelValue, viewValue) { 
       var prop = attrs.bxHasOwnProperty; 
       return (viewValue && prop && viewValue[prop] && viewValue[prop] !== ""); 
      } 
     } 
    }; 
});