CODEWITHSUNDEEP
angularregexformsvalidation
Jesse Sliter
Jesse Sliter

Reputation: 243

Angular 2 form validation pattern regex error

I'm creating a form in angular that requires the name field only contain alphanumeric characters and spaces. To do this I use the pattern attribute:

<input type="text" class="form-control" placeholder="Name" name="Name" [(ngModel)]="name" required pattern="/^[a-z\d-_\s]+$/i" #nameField="ngModel">

and I have the following error message I want to show when the string does not match: 

<div *ngIf="nameField.errors">
   <div [hidden]="!nameField.errors.pattern">
       <p class="has-error">
          Only spaces, letters, and numbers are allowed.
       </p>
   </div>
</div>

However, it seems that even when the string should match the regular expression, I can still see the error message. Any ideas?

Upvotes: 4

Views: 19709

Answers (2)

Wiktor Stribiżew
Wiktor Stribiżew

Reputation: 627087

You may use

pattern="^[\w\s-]+$"

The [A-Za-z\d_] matches the same chars as \w in JavaScript native regex. The whole pattern thus matches one or more ASCII letters, digits, underscores, hyphens or white spaces.

Note that angular anchors the pattern by default, but it is preferable to keep the anchors ^ and $ explicit in the pattern to make it compatible with any other frameworks.

Upvotes: 2

happyZZR1400
happyZZR1400

Reputation: 2405

I guess the issue here is that the syntax of regex not correctly formed:

 <form novalidate #f="ngForm" novalidate>
    <input type="text" 
    class="form-control" 
    placeholder="Name" name="Name" 
    [(ngModel)]="name" 
    required pattern="^[A-Z\\a-z\\d-_\\s]+$" 
    #nameField="ngModel" >
    <div>
      <div *ngIf="nameField.errors?.pattern">
        <p class="has-error">
          Only spaces, letters, and numbers are allowed.
        </p>
        hame: {{nameField.errors | json}}
     </div>
    </div>
  </form>

look at this plunkr

Upvotes: 9

Related Questions