Livewire父表单内动态数组子表单验证失败时旧值保留问题咨询

实现步骤 #

1. 组件类逻辑处理 #

在Livewire组件中定义存储动态数组的公共属性，在mount钩子中优先读取验证失败后的旧输入值回填数组：

// 组件类代码示例
class ParentForm extends Component
{
    // 父表单其他字段
    public $baseInfo;
    // 存储动态子表单数组的公共属性
    public $formItems = [];

    public function mount()
    {
        // 优先读取session闪存的旧输入，不存在则使用默认初始值
        $this->formItems = old('formItems', [
            // 可配置默认的初始条目
            ['title' => '', 'content' => '']
        ]);
    }

    // 动态数组新增条目方法
    public function addItem()
    {
        $this->formItems[] = ['title' => '', 'content' => ''];
    }

    // 动态数组删除条目方法
    public function removeItem(int $index)
    {
        unset($this->formItems[$index]);
        // 重置数组索引，避免前端绑定混乱
        $this->formItems = array_values($this->formItems);
    }

    // 表单提交验证逻辑
    public function submit()
    {
        $validated = $this->validate([
            'baseInfo' => 'required|string|max:200',
            'formItems.*.title' => 'required|string|max:100',
            'formItems.*.content' => 'required|string|max:500',
        ]);

        // 验证通过后的业务处理逻辑
    }

    public function render()
    {
        return view('livewire.parent-form');
    }
}

2. Blade模板配置 #

动态子表单循环渲染时必须添加唯一wire:key，字段使用wire:model绑定到对应索引的属性：

<form wire:submit.prevent="submit">
    <!-- 父表单其他字段 -->
    <div class="form-group">
        <label>基础信息</label>
        <input type="text" wire:model="baseInfo">
        @error('baseInfo') <span class="error">{{ $message }}</span> @enderror
    </div>

    <!-- 动态子表单区域 -->
    <div class="sub-form-wrap">
        @foreach($formItems as $index => $item)
            <div class="sub-form-item" wire:key="form-item-{{ $index }}">
                <input type="text" wire:model="formItems.{{ $index }}.title" placeholder="标题">
                @error("formItems.$index.title") <span class="error">{{ $message }}</span> @enderror

                <textarea wire:model="formItems.{{ $index }}.content" placeholder="内容"></textarea>
                @error("formItems.$index.content") <span class="error">{{ $message }}</span> @enderror

                <button type="button" wire:click="removeItem({{ $index }})">删除当前条目</button>
            </div>
        @endforeach
        <button type="button" wire:click="addItem">新增条目</button>
    </div>

    <button type="submit">提交表单</button>
</form>

注意事项 #

• 循环渲染子表单条目时wire:key必须唯一且稳定，不要使用临时变量作为key的唯一来源，可拼接固定前缀避免和页面其他元素key冲突
• 动态数组的层级绑定遵循Livewire的点语法规则，嵌套层级更深的结构也可以直接用数组名.索引.子字段1.子字段2的格式绑定，old()函数会自动匹配对应层级的闪存值
• 无需手动处理动态数组的session闪存逻辑，Livewire触发验证失败后会自动将所有公共属性的当前值写入闪存，mount阶段直接读取old()返回值即可完成回填

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