javascript - 仅为范围内的数字动态创建 ng-pattern 的正则表达式

Question

我有一个数字类型的输入表单字段，我试图让 Angular 验证它(到目前为止这看起来很棒)，但是我似乎无法获得动态创建正则表达式以应用于 ng-pattern 的正确语法将用户限制在 json 调用后传递给 Controller ​​的最小值和最大值之间的数字范围内。

这很快而且很有帮助:

ng-pattern for only numbers will accept chars like '-' in angular.js

所以我最初在 ng-pattern 上设置它并且它有效，但允许最小和最大范围之外的数字:

$scope.onlyNumbers = /^\d/;

但是，我需要即时制作正则表达式并使其成为一个范围，所以我尝试了但没有成功:

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

显然，我不是 RegEx 专家。

感谢任何帮助。

提前致谢!

Answer 1

尝试使用 <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/