Angular Angular - 1 year ago 49
AngularJS Question

Don't allow user to type in pipe character '|' in input form Angular

I know ng-pattern can be used to allow characters. I'm looking for a way to just limit one specific character.

My input box should work with any characters except the verticle bar '|' . I want to either throw an error just not allow it to be typed out. Is there an easy way to just not allow that specific character. Or should I just use ng-pattern to include EVERYTHING except the vertical bar? ( how would I do that?)

My html:

<td class="col-xs-3">
<input type="text"
required />

<div ng-messages="addForm.Application.$error"


enter image description here

Answer Source

You need to add an ng-pattern attribute to the input and use a regex that will restrict textual input.

This regex must match the text, thus, you need to check if the full input has no pipe symbols.

You need:

  • ^ - start of string
  • [^|]* - zero or more symbols other than | (replace * with + to disallow empty input)
  • $ - end of string.

Thus, use


The /.../ are regex delimiters that will let angular know we are passing a regex object rather than a string.

Also, ng-pattern="[^|]*" should also work since string patterns are anchored by default in Angular.