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:
But still, in the page, I can see this:
While in the demo site, I can see this:
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?