Symfony表单：为单个字段设置动态默认值

问题场景 #

现有一批锦标赛列表，每个锦标赛下方对应着赛事列表，点击每个锦标赛旁的按钮会弹出统一的模态框创建新赛事。需求是：点击某一锦标赛的按钮时，模态框表单里的championship EntityType字段自动选中该锦标赛。

步骤1：给触发按钮添加锦标赛ID标识 #

修改Twig中触发模态框的链接，新增data-championship-id属性，将当前循环到的锦标赛ID存入其中：

<p>{{ champ.name }} 
  <a data-bs-toggle="modal" data-bs-target="#exampleModal" data-championship-id="{{ champ.id }}">
    <i class="fa-solid fa-circle-plus"></i>
  </a>
</p>

步骤2：（可选）给EntityType字段设置明确ID #

在FormBuilder中为championship字段添加自定义ID，方便后续JS快速定位元素（不设置也能实现，但设置后代码可读性更强）：

->add('championship', EntityType::class, [
    "class" => Championship::class,
    "choice_label" => 'name',
    "attr" => [
        "id" => "championship-select"
    ]
])

步骤3：编写JS监听模态框事件，设置选中项 #

在Twig页面底部（或独立JS文件）添加以下代码，监听Bootstrap模态框的显示事件，获取按钮传递的锦标赛ID后，直接设置表单选择框的选中值：

<script>
// 监听模态框即将显示的事件
document.getElementById('exampleModal').addEventListener('show.bs.modal', function (event) {
  // 获取触发模态框的按钮元素
  const triggerBtn = event.relatedTarget;
  // 从按钮的自定义属性中读取锦标赛ID
  const champId = triggerBtn.getAttribute('data-championship-id');
  
  // 定位表单中的锦标赛选择框
  const selectBox = document.getElementById('championship-select');
  // 存在有效ID时设置选中项
  if (selectBox && champId) {
    selectBox.value = champId;
  }
});
</script>

额外提示 #

如果未给EntityType设置自定义ID，也可以通过表单字段的name属性定位元素。Symfony生成的字段name通常为form[championship]（假设表单变量名为form），此时JS代码可替换为：

const selectBox = document.querySelector('select[name="form[championship]"]');

Symfony的EntityType默认会将实体ID作为option的value值，因此直接赋值ID即可选中对应选项。

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