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

Question

您好，我在验证最小值和最大值形式的输入时遇到了一些问题，我有以下内容。

我的表单输入：

        <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 模块有关，因为我从输入中取出它，最小和最大验证器工作正常但不是 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>

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

Answer 1

好的，找到了一种现在可以正常用于验证的解决方案。这是指令：

.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>

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

Angular JS Directive Form input validation of min and max

angularjs

angularjs-directive