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/