Question

我第一次尝试制作自定义AngularJS指令，其中完成了一些货币验证检查并设置了表单有效性。我正在尝试使用验证用户输入的链接设置模糊事件，然后在任何验证检查失败时添加CSS和html元素。以下是我到目前为止的情况：

angular.module('sharedDirectives', []).directive('abccurrency', function () {
return {
    restrict: "A",
    require: 'ngModel',
    replace: true,
    link: function (scope, element, attr, ctrl) {
        var commaRegEx = /^(?:\d+(?:,\d{3})*(?:\.\d{2})?)$/;
        var min = 0;
        var max = 99999.99;

        element.bind('blur', function (value) {

            var valueNoComma = parseFloat(value.currentTarget.value.replace(/,/g, ''));
            ctrl.$setViewValue(String(value.currentTarget.value).replace(/,/g, ''));

            var validCommas = commaRegEx.test(value.currentTarget.value);
            ctrl.$setValidity('commaValidate', validCommas);

            if (validCommas === true) {
                var aboveMin = min < valueNoComma;
                ctrl.$setValidity('minValidate', aboveMin);
            }

            if (validCommas === true) {
                var belowMax = valueNoComma <= max;
                ctrl.$setValidity('maxValidate', belowMax);
            }
        });
    }
};
});

以下是我尝试将此指令应用于html的示例：

<form name="testform">
<div class="row top-buffer15">
    <div class="col-md-3" ng-class="{'has-error' : testform.currencytest.$invalid && testform.currencytest.$touched}">
        <input type="text" ng-model="matchpay.test" id="currencytest" name="currencytest" class="form-control" abccurrency>
        <p style="color: red" ng-show="testform.currencytest.$error.commaValidate">Currency fields must the form XX,XXX.XX or XXXXX.XX.</p>
        <p style="color: red" ng-show="testform.currencytest.$error.minValidate">Currency fields must be more than zero.</p>
        <p style="color: red" ng-show="testform.currencytest.$error.maxValidate">Currency fields cannot be more than $99,999.99.</p>
    </div>
</div>
</form>

现在我的问题是，在项目的一个区域，这可以正常工作。用户输入他们的输入并显示CSS样式和错误通知html。但是，在另一个领域，即使指令中的代码已运行，模糊事件也不会实际改变任何内容。只有在您单击输入和输出后，才会显示正确的验证信息。我做错了有什么明显的东西吗？我不清楚为什么它会在一个地方工作而不是另一个地方工作。如果您需要其他信息，请与我们联系。我很乐意发布功能差异的屏幕截图。

Answer 1

在做了一些研究并确认应该工作之后。我尝试将$ setViewValue调用放在最后，看看是否会做任何事情。事实证明，无论出于何种原因，它确实会阻止$ setValidity调用。任何想法为什么？该重构允许指令正确地通知用户输入错误。

element.bind('blur', function (value) {

            var valueNoComma = parseFloat(value.currentTarget.value.replace(/,/g, ''));

            var validCommas = commaRegEx.test(value.currentTarget.value);
            var aboveMin = min < valueNoComma;
            var belowMax = valueNoComma <= max;

            ctrl.$setValidity('commaValidate', validCommas);
            ctrl.$setValidity('minValidate', aboveMin);
            ctrl.$setValidity('maxValidate', belowMax);
            ctrl.$setViewValue(String(value.currentTarget.value).replace(/,/g, ''));


        });

AngularJS指令模糊事件未设置验证

1 个答案: