динамическое создание регулярного выражения для ng-шаблона только для чисел в пределах диапазона

У меня есть поле формы ввода с номером типа, которое я пытаюсь разрешить Angular проверить (что пока кажется отличным), однако я не могу получить правильный синтаксис для динамического создания регулярного выражения для применения к шаблону ng, который ограничивает user в диапазон чисел от минимального до максимального значения, которые передаются контроллеру после вызова json.

Это было быстро и полезно:

ng-шаблон для только чисел будет принимать символы типа '-' в angular.js

Итак, я изначально установил это в шаблоне ng, и он работает, но допускает числа за пределами минимального и максимального диапазона:

$scope.onlyNumbers = /^\d/;

Однако мне нужно сделать регулярное выражение на лету и сделать его диапазоном, поэтому я без особого успеха пытался:

$scope.onlyNumbers = new RegExp(".{" + $scope.min + "," + $scope.max + "}", "g");

Очевидно, я не эксперт по RegEx.

Любая помощь приветствуется.

Заранее спасибо!


javascript angularjs regex ng-pattern
person Kramericus    schedule 15.08.2014    source источник
comment
Каковы возможные значения min и max?   -  person Braj    schedule 15.08.2014
comment
Первым шагом будет убедиться, что ваш RegExp работает. Я думаю, что {} предназначен для подсчета повторов, чтобы он работал для количества цифр, но не для большего ограничения. Я думаю, что вам лучше всего было бы проверить это в коде.   -  person Jason Goemaat    schedule 15.08.2014
comment
Фраза динамическое создание регулярного выражения является подкатегорией динамического создания кода и его последующей оценки. Это почти всегда неправильный ответ, и даже если это правильный ответ, он не является хорошим...   -  person Mark Reed    schedule 16.08.2014
comment
Разумными диапазонами будут от 0 до 999 (тройные цифры), но чаще всего от 0 до 10. @user3218114   -  person Kramericus    schedule 16.08.2014
comment
Я понимаю и согласен с @Mark Reed, хотя бы из-за фактора PIA, но ng-pattern выглядит чертовски полезным для этого мобильного приложения - к сожалению, я не могу создать регулярное выражение, пока не получу минимум и максимум во время выполнения (из json вызов)   -  person Kramericus    schedule 16.08.2014

Ответы (1)


arrow_upward
2
arrow_downward

Попробуйте использовать <input type="number">, тогда вы сможете установить минимальные и максимальные значения напрямую без регулярного выражения.

html:

<div ng-app ng-controller="FormCtrl">
    <form name="form01">
        <input 
            type="number"
            min="{{range.min}}"
            max="{{range.max}}"
            ng-model="value"
            name="number"
            ng-class="{'error' : !form01.number.$valid}"
        >
    </form>
</div>

JS:

function FormCtrl($scope) {
    $scope.range = {
        min: 10,
        max: 20
    };
}

CSS:

.error {
    border: 1px solid red;
    background: rgba(255,0,0,0.3);
}

демонстрация: http://jsfiddle.net/dmmLgnqb/2/

person Bodzio    schedule 15.08.2014
comment
Я урезал форму, чтобы иметь имя и ng-submit, и урезал мое единственное поле ввода буквально до того, что у вас есть выше и в скрипке (приятный штрих), и я даже провел рефакторинг контроллера, чтобы буквально использовать $scope.range и добавил свойства mix и max, как и вы, и поместил точный css прямо на страницу, и я не получаю такого же поведения. Я вывожу логическое значение form.number.$valid на странице, и оно не считывается как ложное, когда числовое значение больше максимального или меньше минимального. Я проверил и обновил ng до версии 1.2.22. Не повезло. @Бодзио - person Kramericus; 16.08.2014
comment
Попробуйте отобразить объект ошибки из этого поля {{form01.number.$error}} и вставьте то, что он показывает (это должно быть что-то вроде этого {"number":false,"max":true,"min":false} со свойствами min и max) - person Bodzio; 16.08.2014
comment
Я вывожу form.number.$error и получаю {number: false} для числового значения и {number: true} для альфа-канала, но там никогда не бывает минимума или максимума. Спасибо, что остаётесь со мной @Bodzio - person Kramericus; 16.08.2014
comment
Странно... Может попробовать добавить атрибут novalidate к входу? Это должно отключить встроенную проверку браузера (<input type="number" novalidate>). - person Bodzio; 16.08.2014
comment
Novalidate не изменил поведение. Это странно. Однако я решил свою проблему, создав директивы ngMin и ngMax, которые отображаются в форме form.number.$error, как показано здесь: jsfiddle.net/g/s5gKC Это сработало. - person Kramericus; 17.08.2014
comment
Ницца! (комментарий к короткому бла-бла-бла) - person Bodzio; 18.08.2014