ng-pattern regex错误:[$ parse:lexerr] Lexer Error

时间:2016-04-05 21:30:00

标签: javascript angularjs regex ng-pattern angularjs-ng-pattern

我将此作为我的正则表达式

(^([Aa][Ss])[0-9]{8})|(^6[0-9]{7})

我在下面收到控制台错误,但它确实有效!:

libraries-c8d65edf41.js:22505 Error: [$parse:lexerr] Lexer Error: Unexpected next character  at columns 1-1 [^] in expression [(^([Aa][Ss])[0-9]{8})|(^6[0-9]{7})].

http://errors.angularjs.org/1.5.2/ $解析/ lexerr P0 =意外%20nextharacter%20安培; P1 = S%201-1%20%5B%5E%5D&安培; P2 =(%5E(%5BAa%5D%5BSs% 5D)%5B0-9%5D%7B8%7D)%7C(%5E6%5B0-9%5D%7B7%7D)

有关如何摆脱控制台错误的任何想法? 感谢。

这是指令html

<div class="input">
<div data-ng-class="{'input-group': label}">
    <div class="input-group-addon"
        data-ng-if="label">
        {{label}}
        <span class="required"
            data-ng-if="required && isEditable">
            *
        </span>
    </div>
    <div class="input-group-addon required"
        data-ng-if="!label && required && isEditable">
        *
    </div>
    <div class="form-control"
        title="{{object[key] || 'N/A'}}"
        data-ng-if="!isEditable">
        <span>{{object[key] || 'N/A'}}</span>
    </div>
    <div class="form-control editable"
        title="{{object[key] || 'N/A'}}"
        data-ng-if="isEditable && !isEditing"
        data-ng-click="edit()">
        <span>
            <a href="">{{object[key] || 'N/A'}}</a>
        </span>
    </div>
    <input class="form-control"
        data-ng-if="isEditable && isEditing"
        data-ng-model="model.value"
        data-ng-keydown="onKeypress($event)"
        data-ng-blur="save()"
        data-ng-pattern="regexPattern"
        name="{{inputName}}"
        data-csdp-autofocus />
</div>

,这是指令

的js
(function (angular) {
'use strict';

angular.module('commons.directives.forms')
    .directive('exInput', InputDirective);

InputDirective.$inject = ['$q', 'commons.constants.KeyCodeConstant'];

function InputDirective ($q, KeyCodeConstant) {
    return {
        restrict: 'A',
        replace: true,
        templateUrl: 'commons/directives/forms/input.directive.html',
        link: link,
        scope: {
            input: '@exInput',
            isEditable: '=?',
            object: '=ngModelObject',
            key: '@ngModelKey',
            autofocus: '=?',
            required: '@ngRequired',
            inputName: '@inputName',
            regexPattern: '@ngPattern',
            preEditing: '&',
            onEditing: '&',
            onSave: '&',
            onCancel: '&',
            onFinally: '&',
            onInit: '&'
        }
    };

    function link (scope) {
        scope.edit = edit;
        scope.save = save;
        scope.cancel = cancel;
        scope.onKeypress = onKeypress;
        scope.label = scope.input;
        scope.model = { value: '' };
        scope.isEditing = scope.autofocus ? scope.autofocus : false;

        var oldValue;

        function edit () {
            $q.when(scope.preEditing()).then(function() {
                oldValue = scope.object[scope.key];
                scope.model.value = oldValue;
                scope.label = '> ' + scope.input;
                scope.onEditing();
                scope.isEditing = true;
            });
        }

        function save () {
            scope.object[scope.key] = scope.model.value;
            scope.onSave();
            onFinally();
        }

        function cancel () {
            scope.object[scope.key] = oldValue;
            scope.onCancel();
            onFinally();
        }

        function onKeypress (event) {
            if (event.keyCode === KeyCodeConstant.ENTER) {
                save();
            } else if (event.keyCode === KeyCodeConstant.ESC) {
                cancel();
            }
        }

        function onFinally () {
            scope.label = scope.input;
            scope.isEditing = false;
            scope.onFinally();
        }

        scope.onInit({ $scope: scope });
    }
}

})(角度);

以下是我如何使用它;

<input class="form-margin"
                        data-ex-input="Assignment ID"
                        data-is-editable="true"
                        data-ng-model-object="vm.contract"
                        data-ng-pattern="{{vm.AssignmentIdRegex}}"
                        data-input-name="assignmentId"
                        data-ng-model-key="assignmentId" />
                    <div class="alert alert-info"
                    data-ng-show="contractForm.assignmentId.$error.pattern && contractForm.assignmentId.$dirty">
                        <strong>Assignment ID: </strong>ie. AS12345678 or 61234567
                    </div>

1 个答案:

答案 0 :(得分:4)

在开始时使用转义字符/&amp; regx表达式的结尾,这样有助于解析器从属性regx正确读取ng-pattern

ng-pattern="/(^([Aa][Ss])[0-9]{8})|(^6[0-9]{7})/"

输入传递As00000000&amp; 61234567

Demo Plunkr