如何在Livewire Volt类中关联$errors->all()验证错误？

a) 是否存在类似Modelable的errorable属性？ #

Livewire 3 和 Volt 1.6 没有内置的 #[Errorable] 属性来直接关联验证错误到组件，但可以通过以下方式实现类似效果：

• 利用Livewire的错误袋（Error Bag）机制，在Volt组件中基于form对象的字段名拼接错误键。比如组件接收$fieldName属性后，在模板中直接使用：

  @error('form.' . $fieldName)
      <span class="text-red-500">{{ $message }}</span>
  @enderror
  

  如果上述方式无效，可在Volt组件类中手动获取错误：

  public function getFieldError()
  {
      return $this->getErrorBag()->first('form.' . $this->fieldName);
  }
  

  再在模板中调用该方法判断并显示错误：

  @if($fieldError)
      <span class="text-red-500">{{ $fieldError }}</span>
  @endif
  

b) 如何通过Livewire事件让Volt组件捕获验证错误？ #

可以通过自定义事件传递错误信息，步骤如下：

1. 父组件触发事件：在表单验证失败后，将错误数组通过事件分发：

   // 父Livewire组件的提交方法示例
   public function submit()
   {
       $validator = Validator::make($this->form, [
           'name' => 'required',
           // 其他验证规则
       ]);
   
       if ($validator->fails()) {
           $this->dispatch('validation-failed', errors: $validator->errors()->toArray());
           return;
       }
   
       // 验证通过后的业务逻辑
   }
   

2. Volt组件监听事件：在Volt组件类中监听事件并存储错误：

   <?php
   
   use Livewire\Volt\Component;
   
   new class extends Component {
       public string $fieldName;
       public array $componentErrors = [];
   
       #[On('validation-failed')]
       public function handleValidationFailed(array $errors)
       {
           $this->componentErrors = $errors;
       }
   
       public function getFieldError()
       {
           return $this->componentErrors['form'][$this->fieldName][0] ?? null;
       }
   };
   ?>
   

3. Volt模板显示错误：

   <div>
       <input type="text" wire:model="form.{{ $fieldName }}">
       @if($fieldError)
           <span class="text-red-500">{{ $fieldError }}</span>
       @endif
   </div>
   

也可以直接监听Livewire的全局validation.failed事件，无需自定义事件，同样能获取到错误信息。

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