首页 文章

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

提问于
浏览
2

我有一个输入表单字段,类型编号,我试图让Angular验证(到目前为止似乎很好),但是我似乎无法获得正确的语法来动态创建正则表达式以应用于限制用户使用json调用后传递给控制器的最小值和最大值的数字范围 .

这很快,很有帮助:

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

任何帮助表示赞赏 .

提前致谢!

1 回答

  • 2

    尝试使用 <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);
    }
    

    demo: http://jsfiddle.net/dmmLgnqb/2/

相关问题