Symfony 3.4：NumberType/MoneyType渲染为text输入而非number输入求解决方案

我完全明白你在Symfony 3.4里遇到的这个头疼问题——明明用了NumberType表单字段，结果渲染出来的却是type="text"的输入框，而不是预期的HTML5 number类型。别担心，这里有几个比JS强制修改更优雅的解决方案：

最简单的方式就是在表单字段的attr选项里明确添加type="number"，直接强制渲染为number类型输入框：

// ElementArrivageType.php
->add('prixUnit', NumberType::class, array(
    'scale' => 3,
    'attr' => array(
        "type" => "number", // 新增这一行指定HTML类型
        "min" => 0,
        "scale" => 3,
        "step" => 0.001,
        "placeholder" => "0.000",
    )
))

Twig代码保持你原来的写法即可：

{{ form_widget(form.prixUnit, {'attr': {'class': 'form-control'}}) }}

这样渲染后的输入框就会是type="number"，同时保留你设置的所有属性。

如果你希望项目中所有NumberType都默认渲染为HTML5 number类型，可以在Twig里全局覆盖number_widget块，注意要把这个块放在表单渲染代码之前：

{# 先定义覆盖的模板块 #}
{% block number_widget %}
    {% set attr = attr|merge({'type': 'number'}) %}
    {{ block('form_widget_simple') }}
{% endblock %}

{# 正常渲染表单 #}
{{ form_start(form) }}
    {{ form_row(form.prixUnit, {'attr': {'class': 'form-control'}}) }}
{{ form_end(form) }}

这个方法的好处是不用每个字段单独配置，所有NumberType字段都会自动转为number类型输入框。

你之前尝试的number_widget块里设置{% set type = type|default('number') %}，但在Symfony 3.4的表单模板逻辑中，form_widget_simple是通过attr.type来确定输入框类型的，而非单独的type变量。所以正确的姿势是把类型合并到attr数组里，而不是单独设置type变量。

如果你的项目有多个模板需要统一这个设置，推荐创建自定义表单主题：

1. 创建app/Resources/views/form/fields.html.twig文件，内容如下：

{% extends 'form_div_layout.html.twig' %} {# 如果你用了Bootstrap主题，替换成对应的布局文件 #}

{% block number_widget %}
    {% set attr = attr|merge({'type': 'number'}) %}
    {{ parent() }}
{% endblock %}

2. 在app/config/config.yml中配置启用这个主题：

twig:
    form_themes:
        - 'form/fields.html.twig'

这样整个项目的NumberType都会默认渲染为HTML5 number类型，是最优雅的全局解决方案。

内容的提问来源于stack exchange，提问作者Med Karim Garali