时间戳

首页 > 解决方案 > 最小和最大的Angular JS指令表单输入验证

angularjs - 最小和最大的Angular JS指令表单输入验证

问题描述

嗨，我在验证最小和最大形式的输入时遇到了一些麻烦，我有以下内容。

我的表单输入：

        <div class="input short" ng-if="input.tipo_simulacao.key == 2">
            <input

                name="valor_simulacao_t"
                ng-model="input.valor_simulacao_t"

                type="text"

                required
                ng-minlength="1"

                min="0"
                max="99.99"
                ng-currency currency-symbol="%"

                placeholder="Valor Simulação">
            </input>

            <span class="input-clear"
                ng-model="input.valor_simulacao_t"
                ng-click="input.valor_simulacao_t = null"
                ng-show="form.valor_simulacao_t.$viewValue && input.valor_simulacao_t !== ''"
            >&times;</span>
        </div>

这是用于验证的 JS 指令：

vm.$watch('input.valor_simulacao_t', function (newValue, oldValue) {
    if (vm.input.valor_simulacao_t && vm.form.valor_simulacao_t && $rootScope.user.taxa_inferior_protocolo < 1) {

        console.log(vm.taxa_base);
        console.log(newValue);

        if (newValue > vm.taxa_base) {
            vm.form.valor_simulacao_t.$setValidity('max', false);
        } else if (newValue < vm.taxa_base) {
            vm.form.valor_simulacao_t.$setValidity('min', false);
        }
    };
});

现在在输入中我设置了一个带有小数点的最小和最大属性，这是一个百分比字段。在指令中验证了用户详细信息能够具有低于 vm.taxa_base 变量的值，然后继续检查输入值是否高于 vm.taxa_base 值，如果高于则设置 max 属性无效，如果它小于 vm.taxa_base 值，则将 min 属性设置为无效。

我遇到的问题是，如果我将值与 9,60 之类的 % 的逗号分隔符放在一起，然后广告 % 它表示正确无效，因为 vm.taxa_base = 2.5 但是如果我插入一个类似于 15 的值而没有逗号或 15,00 将其设置为它不应该假设的有效值，因为在指令中我正在比较每个较小或较大的值。

提前感谢，因为我被困在这里。

好吧，在弄乱它之后，我发现这与 ng-currency 模块有关，因为我将其从输入中取出，min 和 max 验证器工作正常，但 ng-currency 格式化为 % ，它作为逗号分隔符该值以点分隔。

这是验证输入的观察者：

vm.$watch('input.valor_simulacao_t', function (newValue, oldValue) {
    if (vm.input.valor_simulacao_t && vm.form.valor_simulacao_t && $rootScope.user.taxa_inferior_protocolo < 1) {
        if (newValue > vm.taxa_base) {
            console.log('Error Greater 2');
            vm.form.valor_simulacao_t.$setValidity('max', false);
        } else if (newValue < vm.taxa_base) {
            console.log('Error Lesser 2');
            vm.form.valor_simulacao_t.$setValidity('min', false);
        } else {
            console.log('Pass 2');
            vm.form.valor_simulacao_t.$setValidity('max', true);
            vm.form.valor_simulacao_t.$setValidity('min', true);
        }
    };
});

现在输入（指令）：

            <input

                name="valor_simulacao_t"
                ng-model="input.valor_simulacao_t"

                type="text"

                required
                ng-minlength="1"

                min="0"
                max="99.99"

                placeholder="Valor Simulação">
            </input>

有没有办法以某种方式格式化数字以尊重百分比格式？

标签： angularjsangularjs-directive

解决方案

好的，其中一种解决方案现在可以很好地进行验证。这是指令：

.directive('formatPercentage', function() {

    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, elem, attr, ngModel) {

            if (!ngModel) return;

            elem.on('focusout', function() {
                var str = elem.val();
                elem.val(str + ' %');
            });

            elem.on('focus', function() {
                var str = elem.val();
                elem.val(str.substring(0, str.length - 2));
            });

            ngModel.$formatters.unshift(function () {
                ngModel.$modelValue = parseFloat(ngModel.$modelValue).toFixed(2).replace('.', ',');
                return (ngModel.$modelValue == 'NaN') ? '' : ngModel.$modelValue + ' %';
            });

            ngModel.$parsers.unshift(function (viewValue) {
                return parseFloat(viewValue.replace(',', '.')).toFixed(2);
            });

        }
    };
})

这是自定义指令的输入：

<input

                    name="valor_simulacao_t"
                    ng-model="input.valor_simulacao_t"

                    type="text"

                    required
                    ng-minlength="1"

                    min="0"
                    max="99.99"
                    format-percentage

                    placeholder="Valor Simulação"
                    autocomplete="off">
                </input>

推荐阅读