Angular JS Проверка правильности ввода формы директивы min и max - PullRequest
Новая
       16

Angular JS Проверка правильности ввода формы директивы min и max

0 голосов
/ 21 апреля 2020

Привет У меня возникли проблемы с проверкой ввода в моей форме min и max, где у меня есть следующее.

Моя форма ввода: 

        <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);
        }
    };
});

Теперь во входных данных я установил атрибут min и max с десятичной точкой, где это поле в процентах. В директиве есть проверка того, где пользовательские данные могут иметь более низкое значение, чем переменная vm.taxa_base, затем обрабатывает и проверяет, больше ли входное значение, чем значение vm.taxa_base, если это так, чем устанавливает атрибут max как недопустимый, где как I, если оно меньше, чем значение vm.taxa_base устанавливает атрибут min как недопустимый.

Проблема, с которой я сталкиваюсь, заключается в том, что, если я помещаю значения с разделителем запятых% как 9,60 который объявляет% после этого, он правильно говорит, что недопустим, это vm.taxa_base = 2.5, но если я вставлю значение как 15 без запятой или 15,00, то оно устанавливает в качестве допустимого значения, которое не должно предполагаться, так как в директиве я сравнивая значение каждого из меньшего или большего.

Заранее спасибо, потому что я застрял здесь.

Хорошо, после возни с этим я обнаружил, что это имеет отношение к нг модуль -currency, так как я беру это из ввода, валидатор min и max работает нормально, но не с форматированием ng-currency в% whic h как разделитель запятых в качестве значения, разделенного точками.

Вот наблюдатель для проверки ввода: 

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>

Есть ли способ отформатировать число определенным образом, чтобы соответствовать формату в процентах?

1 Ответ

0 голосов
/ 28 апреля 2020

Хорошо, есть одно из решений, которое теперь отлично работает для проверки. Вот директива: 

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