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.

Oh, ye sorry i'm blind.. it works but it is still a problem, if i want to write just a letter, it cant accept it. i mean if i enter "a" i got the error — Cupkek05
– Cupkek05, Commented Aug 21, 2017 at 12:43
Use $scope.regex = "^[^/]\\S*$";. It will allow 1 or more chars and the first one cannot be /. Does it work as expected? — Wiktor Stribiżew
– Wiktor Stribiżew, Commented Aug 21, 2017 at 12:43

Wiktor Stribiżew · Accepted Answer · 2017-08-21 12:48:11Z

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 /.

edited Aug 21, 2017 at 12:48

answered Aug 21, 2017 at 12:45

Wiktor Stribiżew

631k41 gold badges502 silver badges633 bronze badges

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

14 Comments

CinCout Over a year ago

Won't using double backslash actually match '\' literally followed by a S?

Wiktor Stribiżew Over a year ago

@CinCout: No, see stackoverflow.com/questions/17863066/…

CinCout Over a year ago

Ah. The constructor is getting a string. Perfect

Cupkek05 Over a year ago

Thanks man, and what if i just want to accept tilda, underscore, and letters at first please?

Cupkek05 Over a year ago

do I have to add other signs one by one after the "/" ?

|

Collectives™ on Stack Overflow

ng-pattern / ng-show AngularJS

1 Answer 1

14 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

14 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related