Search code examples
angularregexformsvalidation

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?

Solution

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