如何实现Symfony FileType自动占位符与标签的翻译？

你遇到的“Escolher ficheiro”和“nenhum ficheiro selecionado”是Symfony表单组件内置的翻译字符串，无法通过直接设置placeholder属性修改，需要通过Symfony翻译系统或自定义模板的方式处理，以下是具体方案：

方案一：利用Symfony翻译系统覆盖默认文本 #

这是最符合Symfony规范的方式，通过配置翻译资源替换默认文本：

1. 确认翻译组件已启用
   检查config/packages/translation.yaml配置，确保翻译功能正常：

   framework:
       default_locale: 'pt' # 你的默认语言
       translator:
           default_path: '%kernel.project_dir%/translations'
           fallbacks:
               - 'en'
   

2. 添加自定义翻译文件
   在项目根目录的translations文件夹下，创建对应语言的表单翻译文件：

   • 英文版本 forms.en.yaml：

     form:
         choose_file: 'Choose file'
         no_file_chosen: 'No file chosen'
     

   • 法文版本 forms.fr.yaml：

     form:
         choose_file: 'Choisir un fichier'
         no_file_chosen: 'Aucun fichier sélectionné'
     

   上述键名form.choose_file和form.no_file_chosen是Symfony FileType对应文本的官方翻译标识符，系统会自动匹配替换。

方案二：针对单个字段手动指定翻译 #

如果只需给当前avatar字段自定义文本，可在表单构建器中指定翻译域或直接设置相关参数：

->add('avatar', FileType::class, [
    'required' => false,
    'translation_domain' => 'forms', // 关联你创建的翻译文件
])

方案三：通过Twig+JS自定义控件（突破浏览器限制） #

原生HTML文件输入控件的文本由浏览器渲染，部分浏览器不支持直接修改，可通过自定义UI配合JS实现完全可控的文本显示：

<div class="col mb-2">
    <label for="partner-info-avatar" class="form-label label-without-bg mb-0">
        {{ 'forms.labels.image'|trans }}
    </label>
    <!-- 自定义文件选择区域 -->
    <div class="custom-file-container">
        <button type="button" class="btn btn-secondary" id="avatar-select-btn">
            {{ 'forms.choose_file'|trans }}
        </button>
        <span id="selected-file-text" class="ms-2">{{ 'forms.no_file_chosen'|trans }}</span>
        <!-- 隐藏原生控件 -->
        {{ form_widget(form.avatar, { attr: { class: "d-none", id:"partner-info-avatar"} }) }}
    </div>
    <div class="form-errors">
        {{ form_errors(form.avatar) }}
    </div>
</div>

<script>
// 绑定文件选择事件，更新显示文本
document.getElementById('partner-info-avatar').addEventListener('change', function(e) {
    const textEl = document.getElementById('selected-file-text');
    textEl.textContent = this.files.length ? this.files[0].name : '{{ 'forms.no_file_chosen'|trans }}';
});
// 点击自定义按钮触发原生选择框
document.getElementById('avatar-select-btn').addEventListener('click', function() {
    document.getElementById('partner-info-avatar').click();
});
</script>

这种方式既保留Symfony表单的验证逻辑，又能完全自定义显示文本。

内容的提问来源于stack exchange，提问作者Sofia Machado