Как использовать ngPattern для проверки ввода, содержащего запрещенные символы?

Я пытаюсь проверить ввод запрещенных символов. Поле ввода принимает только символы алфавита, тире и подчеркивания.

Когда я тестирую приведенный ниже код, первый символ принимается, но второй вызывает ошибку шаблона.

Мое регулярное выражение: /^[a-zA-Z_-]$/

HTML-код:

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

Этот код находится в диалоговом окне Angular Material Dialog (v1.0.9)


angularjs ng-pattern angularjs-ng-pattern
person Jonathan Anctil    schedule 26.07.2016    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Для более чем одного символа вам нужен * в конце шаблона, т.е.:

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

См. скрипку: https://jsfiddle.net/5wa5478c/

person Nikos Paraskevopoulos    schedule 26.07.2016
comment
У меня есть вопрос, может вы ответите. Этот шаблон ng должен быть динамическим и устанавливаться контроллером в зависимости от контекста. Если я попытаюсь связать это регулярное выражение, оно не сработает. Если я уберу косую черту, это сработает... - person Jonathan Anctil; 26.07.2016
comment
Вы можете сделать это как: <input ... ng-pattern="pattern" />, где pattern помещается в область видимости контроллером. См. jsfiddle.net/xsvpmp6c. - person Nikos Paraskevopoulos; 27.07.2016

arrow_upward
0
arrow_downward

При этом это регулярное выражение указывает, что допустимым вводом является начало строки (^), за которым следует один из утвержденных символов, за которым следует конец строки ($).

Уберите ^ и $, и все должно работать!

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

Сначала протестируйте свой код здесь: http://rubular.com/.

person Tori Huang    schedule 26.07.2016
comment
Да, я тестировал это на другом веб-сайте RegEx в Интернете, но в моем коде Angular возникает ошибка шаблона независимо от того, какой второй символ я ввожу (действительный или нет!) - person Jonathan Anctil; 26.07.2016
comment
Удалите ^ и $, как указано выше, и все должно работать. Ваш код как есть не работает на рубле, но работает с этим фиксом. - person Tori Huang; 26.07.2016
comment
Я удалил эти символы, и теперь все разрешено (работает только для первого символа) - person Jonathan Anctil; 26.07.2016