Dec 8, 2020

Level 7

How to display errors inside a Laravel Livewire child component?

I created an autocomplete Livewire Component:

<livewire:form.subject-autocomplete class="mt-2" id="subject" name="subject" label="Subject" key="subject" :error="$errors->get('subject')" limit="1"/>

My parent component validates the subject and has an error (what gives me the var_dump($errors->get('subject')) inside of the blade (parent) template:

array(1) { [0]=> string(30) "The subject field is required." }

Inside of the child component the error property does not change at all.

It this intentionally? How can I set the error message of my child form components?

I would be really grateful for any help

tykus

5 years ago

Level 104

$errors->first('subject') will give you the first error message from the array of error messages for subject.

EmBee

5 years ago

Level 7

The problem is not that I can't get the error. Even $errors->get('subject') gives me the array which I can then further access.

The problem is, this value do not change in my component. That means: :error="$errors->get('subject')" do not update the child component.

In other words: in my child component I get NULL even when I see the error outside of it in the parent component.

chaudigv

5 years ago

Level 16

@embee Please share your child component.

EmBee

5 years ago

Best Answer

Level 7

The component is quite big :D.

But I solved it this way:

I fired an event on dehydrate on the child component:

public function dehydrate()
{
    $error = $this->getErrorBag()->first('selected');

    if (!$error) {
        return;
    }

    $this->emitUp($this->name . 'HasError', $error);
}

Then I can catch it inside my parent like this:

protected $listeners = [
    'subjectHasError',
];

public function subjectHasError(string $error)
{
    $this->addError('subject', $error);
}

This way the components can 'talk' to each other ;).

Thank you for your help!

Amara

5 years ago

Level 1

Hey Buddie, Could you please tell me If you are showing the error in the child component itself? Because your solution isn't working on my side. Maybe I am not doing it properly. So If you could just elaborate it more that would be great. Thanks.

phh

4 years ago

Level 7

I found this thread that helped me solve my problem. I will try to provide my solution if that helps anyone.

My parent component is handling all the form logic, saving and validation.

How I handle the Form component:

public function dehydrate()
{
    $this->emit('parentComponentErrorBag', $this->getErrorBag());
}

And my child:

protected $listeners = [
    'parentComponentErrorBag',
];


public function parentComponentErrorBag($errorBag)
{
    $this->setErrorBag($errorBag);
}

Then I can just do this is my template, as if the rules were set in the child component:

@error('myvalidationerror') <span class="text-red-600">{{ $message }}</span> @enderror

Again thanks for providing me a way to solve my problem! Hope this one could help someone else :)

1 like

jaceju

2 years ago

Level 2

Here's my solution for Livewire 3:

In the parent component, add a rendered method:

public function rendered(): void
{
    $this->dispatch('ParentComponentValidated', $this->getErrorBag()->messages());
}

Since the entire MessageBag object cannot be used as an event parameter, we can only use its messages() as the event parameter.

In the child component, listen for the ParentComponentValidated event and add the error messages:

#[On('ParentComponentValidated')]
public function setErrors(array $errors): void
{
    foreach ($errors as $name => $messages) {
        $this->addError($name, $messages);
    }
}

Hope this helps.

5 likes

Please or to participate in this conversation.