AngularJS 有效性不会在 $setValidity 调用后重置

Question

我有这个元素:

<input type="text" name="azurerepo" 
    ng-model="item.azurerepo" 
    ng-class="{error: myForm.azurerepo.$invalid}" 
    ng-required="item.deploymentType=='azure'" 
    ui-event="{ blur : 'azureCallback()' }" />

回调执行:

$scope.myForm.azurerepo.$setValidity('azurerepo',false);

如果我输入数据并从输入中出来，它会将其设置为无效。

如果我回到输入，退格所有输入的数据，然后输入仍然无效的内容!我希望它现在有效，因为已经输入了数据。

Answer 1

我不知道你为什么决定使用 angular-ui 而不是创建简单的指令，不过我想可以添加 keyup事件到 ui-event设置有效性的指令和调用函数 true这里。

但我宁愿建议您使用自定义指令保持简单:

yourApp.directive('checker', function () {
  return {
    restrict: 'A',
    scope: {
        checkValidity: '=checkValidity' // isolate directive's scope and inherit only checking function from parent's one
    },
    require: 'ngModel', // controller to be passed into directive linking function
    link: function (scope, elem, attr, ctrl) {
        var yourFieldName = elem.attr('name');

        // check validity on field blur
        elem.bind('blur', function () {
            scope.checkValidity(elem.val(), function (res) {
                if (res.valid) {
                    ctrl.$setValidity(yourFieldName, true);
                } else {
                    ctrl.$setValidity(yourFieldName, false);
                }
            });
        });

        // set "valid" by default on typing
        elem.bind('keyup', function () {
            ctrl.$setValidity(yourFieldName, true);
        });
    }
   };
 });

和你的元素:

<input name="yourFieldName" checker="scope.checkValidity" ng-model="model.name" ng-required=... etc>

和 Controller 的检查器本身:

function YourFormController ($scope, $http) {
    ...
    $scope.checkValidity = function (fieldValue, callback) {
       $http.post('/yourUrl', { data: fieldValue }).success(function (res) {
          return callback(res);
       });
    };
    ...
}