Symfony 3.4: apply mask to MoneyType field

Question

I'm working with Symfony 3.4 and I'm trying to apply mask for my MoneyType | NumberType field,

The purpose of the mask is to act in the Front to make :

1) Format the number (obligatory):

12000.5 => 12 000.5

1234567.2 => 1 234 567.2

2) Disable non numeric Field (optionally):

When the user try to tap a character, the input never change.

For that I try to work with JQuery Libraries, but I get an issue when submitting the form, the backend considers that the input is not a number so the $form->isValid() is not satisfied

FormType:

->add('prixUnit', NumberType::class, array(
  "grouping" => true, //works only on show mode not on newAction
  'attr' => array(
    "class" => "number"
    "min" => 0,
    "step" => 0.100,
    "placeholder" => "0.000",

  )
))

Twig:

$('.number').maskSomeLibrariesJquery();

I'm searching for a clean Symfony Solution to format my field without having problems in the backend.

You can remove the mask on submited data to avoid type error. Lokk a this solution: https://stackoverflow.com/questions/7854651/remove-literals-from-input-mask-after-form-submit — G1.3, May 14 '18 at 15:09
Yes that's the solution that I had adapt but it rest the case when the User refresh the page, I have to unmask the input before it refresh the page! But the codes to handle refresh event doesn't work for me! — Med Karim Garali, May 14 '18 at 21:42

score 0 · Answer 1 · answered May 15 '18 at 14:26

Give a try to this jquery plugin, here is an example. With this plugin you could choose your separator with the decimal option, by default is dot(".") but yyou could change it by space(" ").

Also can be configured by attributes

<input type="text" data-symbol="R$ " data-thousands="." data-decimal="," />

Also there are some tips like:

.maskMoney('unmasked') return a float value (ex.: 'R$ 1.234,56' => 1234.56). PS: If you have only one input field, you should use this way .maskMoney('unmasked')[0], since it will always return an array.

Hope it helps!

Symfony 3.4: apply mask to MoneyType field

FormType:

Twig:

1 Answers1