如何使用ngPattern验证包含受限字符的输入？

Question

I try to validate the input of restricted characters. The input field only accept alphabet, dash and underscore characters.

When I test the code below, the first character is accepted, but the second one raise a pattern error.

My RegEx: /^[a-zA-Z_-]$/

HTML code:

<input ng-model="inputText" name="inputText" required md-maxlength="{{options.maxTextLength}}" md-autofocus ng-keypress="keypress($event)" ng-change="textChanged()" ng-pattern='/^[a-zA-Z_-]$/'>
<div ng-messages="inputTextForm.inputText.$error">
    <div ng-message="required">Input is required.</div>
    <div ng-message="md-maxlength">Input has reached the maximum characters allowed.</div>
    <div ng-message="pattern">Invalid characters.</div>
</div>

This code is in an Angular Material Dialog (v1.0.9)

Answer 1

For more than one character you need the * at the end of the pattern, ie:

<input ... ng-pattern="/^[a-zA-Z_-]*$/" />
<!--                               ^   -->
<!--                               |   -->
<!--             HERE -------------+   -->

See fiddle: https://jsfiddle.net/5wa5478c/

Answer 2

With this, this regex indicates that valid input is the start of a line (^), followed by one of the approved characters, followed by the end of the line ($).

Remove ^ and $, and it should work!

ng-pattern='/[a-zA-Z_-]/'

Test your code here first: http://rubular.com/