ng-pattern / ng-show AngularJS

Question

I am actually got a angular form and some input inside. The purpose is to upload files in a cloud. So, I got an input for a directory path which could contain some sub-directories. So I got a regex on my JS in a scope like this: $scope.regex = "^[^\/]\S+$";

this regex would accept any characters if its not a "/" at first character.

and here's my angular code:

<input name="directory" id="directory" type="text" class="form-control" ng-pattern="regex" ng-model="directoryName" placeholder="Enter a directory name"/>

<span class="error" ng-show="uploaderForm.directory.$error.pattern">directory path can't start by a "/"</span>

Normally, with this regex, this path should be success:

directory/subdirectories/filename...

and this one shouldn't:

/directory/subdirectories/filename...

But my problem is that when i'm writing something like : test/subtest/blablabla, I got the ng-show error...

Note that my input can also be a single char, like a.

Answer 1

Use

$scope.regex = "^[^/]\\S*$";

Or its equivalent regex literal notation:

$scope.regex = /^[^\/]\S*$/;

The first issue is solved with doubling the backslashes. To define a literal \ in JS string literal, you need to double it. See this thread.

The second problem is solved with replacing + (1 or more) with * (0 or more) quantifier. \S+ matches one or more non-whitespace chars, and \S* will match zero or more chars other than whitespace.

Details

• ^ - start of string
• [^\/] - any char other than /
• \S* - zero or more non-whitespace chars
• $ - end of string.

Just in case you also want to allow an empty string, you may use a lookahead based regex:

$scope.regex = /^(?!\/)\S*$/;

Here, (?!\/) is a negative lookahead that will fail the match if the first char is /.