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

Question

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"
                              name="Application"
                              ng-model="list.Application"
                              maxlength="64"
                              required />

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

                        </div>
                    </td>

How do I use ng-pattern to just NOT ALLOW the verticle bar? Does that mean I have to use ng-pattern to allow EVERY possible character except that? Is there a better way? — Angular, Jun 23 '16 at 06:33
If you need more specific help please update the question with what regex pattern you tried. — Wiktor Stribiżew, Jun 23 '16 at 08:26
@WiktorStribiżew I don't know any regex. What regex should I use to allow everything except | — Angular, Jun 23 '16 at 13:23
Check [my answer here](http://stackoverflow.com/a/37988661/3832970). You will find it useful. See the bottom examples. — Wiktor Stribiżew, Jun 23 '16 at 13:30
@WiktorStribiżew totally lost with the stuff haha. So you said use ^[^|]*$ to avoid the |. Does that mean All i do is just put that beside ng-pattern? Sorry totally new to programming — Angular, Jun 23 '16 at 13:35
`ng-pattern="/^[^|]*$/"` if you want to allow an empty string, else `ng-pattern="/^[^|]+$/"` — Wiktor Stribiżew, Jun 23 '16 at 13:36
@WiktorStribiżew Wow it worked! now it pops an error when | is used! Thanks man! Wish I can come up with fast solutions like that =( — Angular, Jun 23 '16 at 13:40

score 1 · Accepted Answer · answered Jun 23 '16 at 13:41

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

ng-pattern="/^[^|]*$/"

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.

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

1 Answers1