Validation error sharing

I have an addresses component, there is all the logic in it, etc., in blade temaplte of this component I use the table component (for reusability), in the table component I include a form in which I use wire:model=$parent.name, there is a problem here because the validation messages are only available in the addresses component, not in the table, so @error() does not work in the form. Is there any way to get around this and use @error normally?

d8devs

2 years ago

Level 10

Use Livewire's global event system to emit an event when a validation error occurs and listen for this event in the child component.

Parent Component:

$this->validate([...]);

$this->emit('validationFailed', $this->getErrorBag()->all());

and Child Component: Listen for the event and store the errors locally.

protected $listeners = ['validationFailed' => 'handleValidationFailed'];

public function handleValidationFailed($errors)
{
    $this->errors = $errors;
}

in your child component's view, you can manually check for errors and display them as needed.

1 like

Blear

2 years ago

Level 1

@d8devs Is there any way to use e.g.

 @error('country') <span class="error">{{ $message }}</span> @enderror

? also I'm using livewire 3.x so emit is replaced by dispatch

d8devs

2 years ago

Level 10

See there: https://laravel-livewire.com/docs/2.x/events#browser

// In your parent component
try {
    $this->validate([
        // validation rules
    ]);
} catch (\Illuminate\Validation\ValidationException $e) {
    $this->dispatchBrowserEvent('validationFailed', ['errors' => $e->validator->errors()->toArray()]);
    throw $e;
}

Please or to participate in this conversation.