Symfony2: How to render HTML5 number input type and accept float values ​​in a form?

For now, the only workaround I can find is to create a custom form field type that does not account for the number. Instead of displaying it as text input, I display it as numeric input.

Sources:

• http://symfony.com/doc/current/cookbook/form/create_custom_field_type.html
• http://symfony.com/doc/current/cookbook/form/form_customization.html#cookbook-form-customization-form-themes

Step 1.Creating a custom form field

In your package repository create your own form class (be careful in namespace) FloatType.php

<?php
namespace <Base Bundle Name>\Form\Type;

use Symfony\Component\Form\AbstractType;
use Symfony\Component\OptionsResolver\OptionsResolverInterface;

class FloatType extends AbstractType
{

    public function getParent()
    {
        return 'number';
    }

    public function getName()
    {
        return 'float';
    }
}

      

        
        
        
      

    

As you can see, your new type simply doesn't inherit from the number type. We'll use it later to cause the form field to display correctly.

Step 2. Creating a template.

To display the newly created form type correctly, you need to call the form template. Since your new type will not contain a number, this will make things much easier.

In the Ressource repository of your package, create a repository called Form inside the view repository. Inside this repository, we'll create a Twig float.html.twig template that will be used to render your custom field:

{% block float_widget %}
    {% set type = type|default('number') %}
    {{ block('form_widget_simple') }}
{% endblock float_widget %}

      

        
        
        
      

    

Step 3: communication and use

Finally, all that remains is to add your template as a news source in app / config / config.yml

# Twig Configuration
twig:
    #use a custom field type for float values
    form:
        resources:
            - '<Bundle full name>:Form:float.html.twig'

      

        
        
        
      

    

And use it in your controller:

use <Base Bundle>\Form\Type\FloatType;
...

$form = $this->createFormBuilder($stuff)
->add('freqLivrLO', new FloatType(), array(
            'label' => 'Fréquence de livraison (nb fois/semaine)',
            'precision'=>2,
            'constraints' => array(
                new GreaterThan(array(
                    'value' => 0, 'message' => 'La fréquence de livraison doit être strictement positive')),
                new LessThanOrEqual(array(
                    'value' => 7, 'message' => 'La fréquence de livraison doit être inférieure à 7'))
            ),
            'attr' => array('step'=>'0.01',
                'min'=>'0',
                'max'=>'7'),
        ))

      

        
        
        
      

    

And this! Any better solution would be greatly appreciated: D