如何在 livewire 中将 $errors->all()) 绑定到我的 volt 类？

Question

在 laravel 11 /livewire 3 站点上，我使用 volt 类来渲染 1 个元素块，如 resources/views/livewire/common/controls/input_text.blade.php 我有代码：

<?php

use Livewire\Volt\Component;
use Livewire\Attributes\Modelable;

new class extends Component {
    #[Modelable]
    public $form;
    public string $formattedValue = '';
    public string $fieldName = '';
    public string $label = '';
    public ?string $placeholder = '';
    public ?int $maxlength = 0;
};
?>

<div class="editor_field_block_wrapper d2">

    <div class="editor_field_block_device_splitter">
        <div class="w-4/12 pb-0 pl-2 md:pt-3 ">
            <label for="{{ $fieldName }}" class="editor_field_block_device_label">
                {{ !empty($label) ? $label: \Str::ucfirst(\Str::replace('_', ' ', $fieldName)) }}:
            </label>
        </div>
        <div class="p-2 w-full">
            <input id="{{ $fieldName }}" name="{{ $fieldName }}" type="text"
                   class="editor_form_input"
                   @if(!empty($maxlength)) maxlength="{{ $maxlength }}" @endif
                   wire:model="form.{{ $fieldName }}"
                   autocomplete="off"
                   @if(!empty($placeholder)) placeholder="{{ $placeholder }}" @endif
            />
            @error('form.' . $fieldName)
            <span class="error_text">{{$message}}</span>
            @enderror
        </div>
    </div>
</div>

我在刀片滤波器中使用这个电压等级：

           <livewire:common.controls.input_text fieldName="name" wire:model="form" :maxlength="50" key="nameInputText"   />

我为此编辑器使用表单对象，并将其传递给 Volt 类并使用 #[Modelable] 属性。

但是提交表单验证错误时会引发阻止：

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

不工作。检查 $errors->all()) 并将其放入父刀片文件中，所有错误均显示正常。

伏特级中的位不会显示这些错误。知道如何将 $errors->all()) 与我的 volt 类联系起来吗？

a) Livewire 具有可建模属性 (https://livewire.laravel.com/docs/nesting#binding-to-child-data-using-wiremodel)。是否有类似“errorable”这样的验证错误？

b) volt 类可以捕获 livewire 事件：当 livewire 验证失败时是否有办法触发自定义事件？

"laravel/framework": "^11.9",
"livewire/livewire": "^3.5",
"livewire/volt": "^1.6",

更新：

我找到了这个https://github.com/livewire/livewire/discussions/7460#discussioncomment-8095059分支 并尝试去做：

public function update(Request $request)
{
        ...
        try {
            $this->form->validate($validationRulesArray, $validationMessages());
        } catch (Throwable $e) {
            // I my log file I do not find these 2 lines
            \Log::info( ' -1 Throwable $e::');
            \Log::info($e);
            $this->dispatch('customValidationError', ['e' => $e]);
            throw $e;
        }

        $this->form->updated_at = Carbon::now(ConfigValueEnum::get(ConfigValueEnum::TIMEZONE));
        ...

在我的 volt 类中尝试捕获此自定义错误：

<?php

use Livewire\Volt\Component;
use Livewire\Attributes\Modelable;
use function Livewire\Volt\{on};

new class extends Component {
    #[Modelable]
    public $form;
    public string $formattedValue = '';
    ...
};

on(['customValidationError' => function ($options) {
    dd('customValidationError $options::' .$options);
    ...
}]);

?>

但我未能捕获验证错误...我可以以某种方式做到这一点吗？ 预先感谢！

Answer 1

当您在父组件中运行验证方法时，您将使用错误列表填充父组件错误包。问题是您的子组件具有可建模表单，无法访问此数据。

我认为，这个问题有两种解决方案。您可以尝试分派事件并在其中添加与该表单相关的错误。或者，您可以为错误创建单独的刀片组件，并将其包含在 Livewire 组件之后。