Laravel Livewire对象数组表单验证错误不显示如何解决

现有代码存在4个问题，直接导致数组项验证失效、错误无法在对应行展示：

• 字段绑定逻辑错误：循环输出多行服务项时，所有行的wire:model都绑定到顶层selected_service_id属性，没有绑定到$items数组对应索引的子项，所有行输入值会互相覆盖
• 验证规则写法错误：嵌套数组验证需要用通配符*匹配数组索引，现有写法items.selected_service_id只会验证$items本身的属性，不会遍历数组内的每一项
• 错误匹配逻辑错误：@error指令未传入带索引的字段路径，无法精准匹配对应行的验证错误
• 兼容性隐患：$items数组内存储stdClass对象在Livewire中容易出现序列化、数据同步异常，建议改用关联数组存储

第一步：修改组件类代码 #

调整初始化逻辑，替换对象为关联数组，修正验证规则，补充动态增删行的配套方法：

public $members;
public $fees; 
public $member_id;
public $date_delivered;
public $terms;
public $date_due;
public $items = [];

public function render()
{
    return view('livewire.fees.billings.billing-create');
}

public function mount()
{
    $this->members = Member::where('company_id', Auth::user()->company_id)->where('status_id',22)->get();
    $this->fees = Fee::where('company_id', Auth::user()->company_id)->where('status_id',20)->get();

    // 初始化第一条空服务项，用关联数组代替stdClass
    $this->items[] = [
        'selected_service_id' => '',
        'quantity' => 0,
        'amount' => 0,
    ];
}

// 动态添加服务行方法
public function addItem()
{
    $this->items[] = [
        'selected_service_id' => '',
        'quantity' => 0,
        'amount' => 0,
    ];
}

// 删除服务行方法
public function removeItem($index)
{
    unset($this->items[$index]);
    $this->items = array_values($this->items); // 重置索引为连续数字，避免验证异常
}

public function store()
{
    $validated = $this->validate([
        'member_id' => 'required',
        'date_delivered' => 'required',
        'terms' => 'required|numeric',
        'date_due' => 'required',
        // 用通配符*遍历items数组下的每一项做验证
        'items.*.selected_service_id' => 'required',
        'items.*.quantity' => 'required|numeric|min:1',
        'items.*.amount' => 'required|numeric|min:0',
    ]);
    
    // 验证通过后的业务逻辑写在此处
}

第二步：修改视图层代码 #

循环时将字段绑定、错误匹配路径都改为带索引的嵌套格式，去掉冗余的原生表单属性：

@foreach($items as $i => $item)
<tr>
    <td>
        <select 
            class="form-select @error('items.{{ $i }}.selected_service_id') is-invalid @enderror" 
            id="service-id-{{ $i }}" 
            wire:model.defer="items.{{ $i }}.selected_service_id"
        >
            <option value="">Please Select</option>
            @foreach ($fees as $fee)
                <option value="{{ $fee->id }}">{{ $fee->code }} - {{ $fee->name }}</option>
            @endforeach
        </select>
        @error('items.{{ $i }}.selected_service_id') 
            <div class="invalid-feedback">{{ $message }}</div> 
        @enderror
    </td>
    <!-- quantity、amount字段按相同格式绑定即可，示例：wire:model.defer="items.{{ $i }}.quantity" -->
    <td>
        <button type="button" wire:click="removeItem({{ $i }})" class="btn btn-danger btn-sm">删除</button>
    </td>
</tr>
@endforeach

<button type="button" wire:click="addItem" class="btn btn-primary">添加服务项</button>

注意事项 #

• 循环输出的表单元素id不能重复，必须加索引后缀，避免前端DOM异常
• 使用wire:model.defer延迟绑定时，提交按钮必须是Livewire组件内的按钮，不要用原生form提交，否则延迟绑定的数据不会同步到后端
• 如果需要自定义数组项的验证错误消息，可以在validate()方法第二个参数按items.*.selected_service_id.required的格式定义消息文本

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