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

0

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

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

Мой RegEx: /^ [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>

Этот код находится в диалоговом окне "Угловой материал" (v1.0.9)

Теги:
ng-pattern
angularjs-ng-pattern

2 ответа

1
Лучший ответ

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

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

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

  • 0
    Отлично, большое спасибо!
  • 0
    У меня есть вопрос, может быть, вы можете ответить. Этот ng-шаблон должен быть динамическим и настраиваться контроллером в зависимости от контекста. Если я попытаюсь связать это регулярное выражение, это не сработает. Если я удаляю косую черту, это работает ...
Показать ещё 1 комментарий
0

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

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

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

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

  • 0
    Да, я тестировал его на другом сайте RegEx в Интернете, но в моем коде Angular он вызывает ошибку шаблона независимо от того, какой второй символ я ввожу (действительный или нет!)
  • 0
    Удалите ^ и $, как указано выше, и это должно работать. Ваш код как есть не работает на Rubular, но работает с этим исправлением.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню