AngualrJS - how can I have alphanumeric in mask?

I bought this template
and I'm customizing it.

1. Scroll down to "Input Mask" section.
2. You see there's a "Phone" field. It's a mask for phone number.
3. It uses a directive.
4. I used the same thing in my code but I changed to this
 <input type="text" name="eligcat2" id="eligcat2" input-mask="" mask-options="{'mask': '(###)'}" maxlength="5" class="form-control" ng-model="user.eligcat2" ng-model-options="{ updateOn: 'blur' }" aria-invalid="true" style="">

Open in new window

5. I want the mask to allow both numbers and alpha. As I have mask': '(###)'}, I can only do numbers.

What I tried

I tried replacing ### with /[a-zA-Z0-9 ]/  but when the page comes up, part of that pattern in the filed. Like it's the text of that  field.

This is the directive that came with the template

(function() {
  'use strict';

    .directive('inputMask', inputMask);

  /** @ngInject */
  function inputMask() {
    var directive = {
      scope: true,
      link: function (scope, element, attrs) {
        var options;
        if (attrs.inputMask) {
          options = scope.$eval(attrs.inputMask);
        } else if (attrs.maskOptions) {
          options = scope.$eval(attrs.maskOptions);

    return directive;



Open in new window

Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
If you look on the template page on the right second box down - Type Validations you will see there is a box with Placeholder AlphaNumeric

The code for this input is

<input name="fc16" class="form-control ng-pristine ng-empty ng-invalid ng-invalid-required ng-valid-pattern ng-touched" placeholder="Alphanumeric" ng-model="fc16" ng-pattern="/^([A-Za-z]|[0-9]|\s)+$/" required="" aria-invalid="true" style="" type="text">

Open in new window

Is that not what you are looking for?

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
CamilliaAuthor Commented:
Oh, I didn't see that one. Let me take a look.
CamilliaAuthor Commented:
No , it's not the validation that I want.

1. In "Input Mask" section, you see the "phone" field. It's this code
<input type="text" class="form-control ng-scope" id="mask06" input-mask="" mask-options="{'mask': '+1(###)###-####'}">

Open in new window

2. I changed it to this
  <input type="text" name="eligcat1" id="eligcat1" maxlength="5" input-mask="" mask-options="{'mask': '(###)'}" class="form-control" ng-model="user.eligcat1" ng-model-options="{ updateOn: 'blur' }" aria-invalid="true" style="">

Open in new window

But now, it only allows numbers. One odd thing, if I type A or F, my line of code accepts it but if I type P, it doesn't. C worked. D worked. S worked.

I want to change this to accept alphanumeric --> mask-options="{'mask': '(###)'}"  it's the mask not validation
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Julian HansenCommented:
if I type A or F,
What is special about the letters A-F?
They are the letters used for hexadecimal - which might explain that bit.
Not sure about the S though

I checked through the JS code and found the following

<input type=text class=form-control id=mask04 input-mask mask-options="{'mask': '[9-]AAA-999'}">

Open in new window

Try a combination of the above
CamilliaAuthor Commented:
The hex makes sense.
Let me try the other one. I saw it late last night. I'll try it when I get home.
CamilliaAuthor Commented:
I remembered I had tried that and that won't work either. That mask {[9-]AAA-999'}  doesn't allow mix of numbers and alpha. It has to have alpha (AAA), followed by number (999)

It's ok. It's not a showstopper. I can put this on the back burner for now.
CamilliaAuthor Commented:
Might just do a validation on the field. Not a showstopper.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.