Symfony表单多文本输入项填充实体数组属性的实现方案

开发中需要渲染Symfony表单完成实体对象的数据库写入，实体包含一个数组类型属性，用于存储唱片曲目列表。预期效果为：

• 在Twig视图中渲染多个text类型输入框填充该数组
• 配合JavaScript实现动态交互：前一个输入框填写完成后自动新增输入项，输入项总数动态不确定
• 所有输入内容最终存入数据库的数组字段

最初参照官方文档编写了如下表单构建代码，但页面没有渲染出任何对应输入项，多次查阅资料调整方案都没能定位问题：

$builder
->add('tracklist', CollectionType::class, [
    'entry_type' => TextType::class,
    'entry_options' => [
        'attr' => ['class' => 'fs-1 text-center text-uppercase']
    ]
])

多次调试Symfony内置CollectionType方案无效后，改用原生前端+后端手动处理的方式实现需求，业务适配度更高，具体实现代码如下：

• 模板部分代码

<p>TRACKLIST</p>
<div id="tracklist_container">
   <label for="tracks">TRACK 1</label>
   <input type="text" name="tracks[]" id="tracks">
</div>

<button id="tracklist-button">ADD A TRACK</button>

• JavaScript动态交互逻辑

let tracklistContainer = document.querySelector('#tracklist_container')
let label = tracklistContainer.querySelector('label')
let input = tracklistContainer.querySelector('input')
let addButton = document.querySelector('#tracklist-button')
let i = 1

addButton.addEventListener('click', (e) => {
    e.preventDefault()
    i++
    
    labelClone = label.cloneNode(true)
    inputClone = input.cloneNode(true)

    labelClone.textContent = "TRACK" + i
    inputClone.value = ""

    tracklistContainer.appendChild(labelClone)
    tracklistContainer.appendChild(inputClone)
})

• PHP控制器层处理代码

// 对提交的曲目参数做安全过滤后赋值给实体属性
$safeTracks = array_map('trim', array_map('strip_tags', $_POST['tracks']));
$disc->setTracklist($safeTracks);

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