Angular 2 form validation pattern regex error

Question

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?

Answer 1

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

Answer 2

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.