2

Short version

How do I use inputmask from a twig inheriting from the avanzu/AdminThemeBundle base?

Context

I'm using the AdminLTE admin panel template (https://adminlte.io/) in a symfony3 project.

To do so, I use the Avanzu project (https://github.com/avanzu/AdminThemeBundle) which allows me two main advantages:

  • I'm able to install it via composer.
  • I have pre-made twig blocks which I can just overwrite in my twigs, for reusability.

The thing is that I need an <input> in a form to express an amount in Euros. I wanted to use the inputmask which you can see in action in AdminLte here: https://adminlte.io/themes/AdminLTE/pages/forms/advanced.html

Buen when I place this code...

<div class="form-group">
    <label>Intl US phone mask:</label>
    <div class="input-group">
        <div class="input-group-addon">
            <i class="fa fa-phone"></i>
        </div>
        <input class="form-control" data-inputmask="'mask': ['999-999-9999 [x99999]', '+099 99 99 9999[9]-9999']" data-mask="" type="text">
    </div>
<!-- /.input group -->
</div>

...the only thing I can see is the input box but no mask in it. Seems that the HTML works but the JS does not.

(PD: The code is a phone instead of Euros because I started copying the example to later edit it.)

Prerequisites

I have already run the php bin/console avanzu:admin:fetch-vendor command and the php bin/console assets:install --symlink both mentioned here https://github.com/avanzu/AdminThemeBundle

I also have the assetic bundle in place and pre-loaded in the kernel.

More context

In my page, I see that the main template is including all LTE javascripts:

<script src="/hello-trip/dislodge-galvanize/web/bundles/avanzuadmintheme/static/dev/scripts/admin-lte-all.js"></script>

Also if I explore admin-lte-all.js it is there and searching for inputmask reveals it is there in the minified version:

enter image description here

But still, in the page, I can see this:

enter image description here

While in the demo site, I can see this:

enter image description here

IDK what's going on or if I should do something else.

Question

What should I code in my twig to make a <input class="form-control" data-inputmask="'mask': ['999-999-9999 [x99999]', '+099 99 99 9999[9]-9999']" data-mask="" type="text"> input to work?

Xavi Montero
  • 9,239
  • 7
  • 57
  • 79

1 Answers1

2

Add this line in your js

 $('[data-mask]').inputmask()
Ahmad Zahabi
  • 1,110
  • 12
  • 15