2

I have this as my regex pattern

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

i get console errors below, but it works!:

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/$parse/lexerr?p0=Unexpected%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)

Any ideas on how to get rid of the console errors? Thanks.

Here is the directive 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>

and here is the js for the directive

(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 });
    }
}

})(angular);

Here is how i use it;

<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 Answer 1

5

Use escaping character / at start & end of regx expression, so that will help parser to read regx correctly from attribute ng-pattern.

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

Input passed : As00000000 & 61234567

Demo Plunkr

Sign up to request clarification or add additional context in comments.

3 Comments

I tried that, but it didnt work for me. The problem is most likely coming from my directive. I made an input directive, and now am passing the regex to the directive.
did you checked the plunkr?
i've added the full problem. as i think it stems from the directive itself, on how i pass regex, as it work when i dont add the two / before and after, but i get the error message on the console. and stops working when i add the two /

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.