Symfony2：如何呈现 HTML5 数字输入类型并在表单中接受浮点值？

Question

我想使用 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">

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

Answer 1

借鉴 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' }) }}

Answer 2

目前，我能找到的唯一解决方法是创建一个取消继承数字的自定义表单字段类型。我没有将其显示为文本输入，而是将其显示为数字输入。

来源：

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

第 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 步：创建模板。

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

在你的 bundle 的 Ressource 存储库中，在视图存储库中创建一个名为 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

Answer 3

我通过使用一些厚颜无耻的 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'));
    }
});

Answer 4

您应该使用number 表单类型而不是integer。一切都会好起来的！换个方式

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

到

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