CODEWITHSUNDEEP
javascriptangularjs
Filip Spiridonov
Filip Spiridonov

Reputation: 36210

Matching one or more alphanumeric characters with AngularJS

I have an AngularJS app. Why does the pattern /^[a-zA-Z0-9]+$/ match an empty string?

<form name="addTeamForm" novalidate ng-init="team=''">
  <input type="text" name="team" ng-model="team" ng-pattern="/^[a-zA-Z0-9]+$/"/>
</form>
{{ addTeamForm.team.$valid }}

Why the value of $valid is true?

http://jsfiddle.net/NameFILIP/fdsqzf12/5/

Upvotes: 2

Views: 5601

Answers (1)

vittore
vittore

Reputation: 17579

You need to also use required or ngRequired:

<input type="text" name="team" ng-model="team" 
       ng-pattern="/^[a-zA-Z0-9]+$/" required />

The way ngPattern work is to check not empty string to match a pattern. If string is empty it won't be checked and no validation error will arise. By specifying required directive in addition to ngPattern you are making empty string invalid value.

Updated fiddle: http://jsfiddle.net/vittore/fdsqzf12/6/

Upvotes: 4

Related Questions