Symfony2:如何呈现HTML5数字输入类型并接受表单中的浮点值?

时间:2014-09-16 17:24:52

标签: html5 forms symfony input numbers

我想使用symfony整数字段类型,因为它使用的HTML5“数字”输入类型更适合数字。

当我在控制器内创建表单时:

$form = $this->createFormBuilder($stuff)
 ->add('freqLivrLO', 'integer', array(
            'label' => 'Fréquence de livraison (nb fois/semaine)',
            'rounding_mode'=>null,
            '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'),
        ))

它正确呈现一个数字字段:

<input id="form_freqLivrLO" name="form[freqLivrLO]" required="required" step="0.01" min="0" max="7" value="0.07" type="number">

但是,每当我输入一个浮点值时,它都会舍入到下一个可用的整数。我该怎么办?

4 个答案:

答案 0 :(得分:5)

从Adambean获取线索,你可以这样做:

->add('lat', NumberType::class, array (
    'required' => true,
    'scale' => 7,
    'attr' => array(
       'min' => -90,
       'max' => 90,
       'step' => 0.0000001,
    ),
))

在你的Twig模板中,你需要定义类型,在我的例子中,它看起来像:

{{ form_widget(edit_form.lat, { 'type':'number' }) }}

答案 1 :(得分:4)

目前,我能找到的唯一解决方法是创建一个不包含数字的自定义表单字段类型。我将其显示为数字输入,而不是将其显示为文本输入。

来源:

  1. http://symfony.com/doc/current/cookbook/form/create_custom_field_type.html
  2. http://symfony.com/doc/current/cookbook/form/form_customization.html#cookbook-form-customization-form-themes
  3. 第1步:创建自定义表单字段

    在您的捆绑存储库中,创建自定义表单类(注意命名空间) 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';
        }
    }
    

    正如您可以看到您的新类型从数字类型中删除。稍后我们将使用它来调用表单字段的正确呈现。

    第2步:创建模板。

    要正确呈现新创建的表单类型,您需要调用表单模板。由于你的新类型不是数字,它将大大简化任务。

    在捆绑包的Res​​source存储库中,在视图存储库内部创建一个名为Form的存储库。在此存储库中,我们将创建将用于呈现自定义字段的Twig模板 float.html.twig

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

    第3步:关联并使用

    最后,唯一剩下的就是在 app / config / config.yml

    中添加模板作为树枝资源
    # Twig Configuration
    twig:
        #use a custom field type for float values
        form:
            resources:
                - '<Bundle full name>:Form:float.html.twig'
    

    并在你的控制器中使用它:

    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'),
            ))
    

    那就是它!任何更好的解决方案将不胜感激:D

答案 2 :(得分:2)

我通过使用一些厚颜无耻的JQuery在运行时更改输入类型来解决这个问题。

以下是表单类型中的条目:

->add('totalDays', 'number', array(
    'required'      => false,
    'scale'         => 1,
    'attr'          => array(
        '_type'         => "number",
        'min'           => 0,
        'step'          => 0.5,
    ),
))

现在我的JQuery将输入类型更改为“_type”属性中定义的内容:

$('input').each(function(k, v){
    if ($(this).attr('_type')) {
        $(this).prop('type', $(this).attr('_type'));
    }
});

答案 3 :(得分:0)

您应该使用number表单类型而不是integer。一切都会好起来的!只是改变

 ->add('freqLivrLO', 'integer', array(...

 ->add('freqLivrLO', 'number', array(...