Question

我想为输入字段创建angular js指令，该指令可配置为允许数字或字母或特殊字符。例子

HTML <input type="text" ng-model="ctrl.inputField" is-alphabets-allowed="false" is-numbers-allowed="true"is-special-characters-allowed="false"

指令

angular.module('forms').directive('inputFieldConstraint', nputFieldConstraint);
InputFieldConstraint.$inject = ['constraintsService'];

function InputFieldConstraint(constraintsService) {
    return {
        restrict: 'EA',
        require: 'ngModel',
        scope: {
            isAlphabetsAllowed: '=',
            isNumbersAllowed: '=',
            isSpecialCharactersAllowed: '='
        },
        link: function (scope, ele) {
            $(ele).on('input', function () {
                var test = $(ele).val().replace(/[^a-bA-Z]/g, '');
                $(ele).val(test);
            });
        }
    }
}

请提出创建指令的最佳实践，以及在这3种情况下应使用哪个正则表达式？

Answer 1

这是一种方法-在link()期间，使用范围变量构建单个正则表达式，然后以编程方式应用新的ng-pattern指令：

    link: function (scope, ele) {
         const allowedClasses = [];
         const { isAlphabetsAllowed, isNumbersAllowed, isSpecialCharactersAllowed } = scope;

         if (isAlphabetsAllowed) allowedClasses.push("[a-zA-Z]");
         if (isNumbersAllowed) allowedClasses.push("/d+");
         if (isSpecialCharactersAllowed) allowedClasses.push("\\^\\$\\(\\)");

         const regexString = allowedClasses.join("");
         scope.regex = new RegExp(regexString, 'g');

         $(ele).attr('ng-pattern', 'regex'); //references our new scope.regex
    }

请注意，如果scope.regex等更改，则还需要更新isAlphabetsAllowed的值，因此您可能需要$scope.watch()或类似名称。

此外，为了确保在执行ng-pattern指令之前执行此操作，您需要确保指令的优先级高于ng-pattern的优先级，{ {1}}，所以我将0设置为priority以确保您先行。

ng-pattern文档：https://docs.angularjs.org/api/ng/directive/ngPattern

需要3个正则表达式，用于不允许数字，不允许字母和特殊字符

1 个答案: