Livewire form validation with computed property

Yes, I know about this [ https://livewire.laravel.com/docs/computed-properties#basic-usage ], where it's stated that the Livewire/Form does not work with #Computed properties. But my approach is a bit different, where I'm calling a #Computed prop from the parent and inside I'm calling the form object like this:

#[Computed]
public function filterDetails(): array
{
    $this->form->validate();

    return $this->form->filterDetails();
}

where if the $this->form->validate(); throws an exception, it breaks the code, instead of showing the error message on the view.

Note: when I don't use it as a computed property, then it validates and filters properly. However I need to use computed, because the complex logic behind the query.

Any ideas?

Thanks Vale

LaryAI

1 year ago

Level 58

To address the issue of form validation within a computed property in Livewire, you need to handle the validation exceptions properly so that they don't break the code and instead show the error messages on the view.

Here's a solution that involves catching the validation exception and manually setting the validation errors on the Livewire component. This way, you can still use the computed property while ensuring that validation errors are properly displayed.

First, let's modify your filterDetails method to catch the validation exception and set the errors:

#[Computed]
public function filterDetails(): array
{
    try {
        $this->form->validate();
    } catch (\Illuminate\Validation\ValidationException $e) {
        $this->setErrorBag($e->validator->errors());
        return [];
    }

    return $this->form->filterDetails();
}

In this code:

We wrap the validation call in a try block.
If a ValidationException is thrown, we catch it.
We then set the error bag on the Livewire component using $this->setErrorBag($e->validator->errors()).
Finally, we return an empty array to ensure the method completes without further issues.

This approach ensures that validation errors are captured and displayed in the view, while still allowing you to use the computed property for your complex logic.

Make sure your Livewire component's view is set up to display validation errors. For example:

<div>
    @if ($errors->any())
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <!-- Your form and other content here -->
</div>

This way, when validation errors occur, they will be displayed in the view, and your computed property will still function as intended.

valentin_vranic

1 year ago

Level 5

Based on AI response, I managed to validate the form and return without breaking the code with exception

    public function validateFilter(): void
    {
        try {
            $this->form->validate();
            unset($this->filterDetails);
        } catch (ValidationException $e) {
            $this->setErrorBag($e->validator->errors());
        }
    }

Please or to participate in this conversation.