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.taqua_base变量，然后继续和检查出，如果输入值高于vm.taqua_base值，如果是这样，比设置最大属性为无效的地方，因为我如果它是小于vm.taqua_base值设置为无效的最小属性。

我所遇到的问题是，如果我把值与逗号分隔符的％，如9,60，广告％后，它说正确的无效的vm.taqua_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>