Form validation with a nest component

#1

Hi,

I have form with a nested component containing a drop down
I have managed to get the value selected from the component to the main component using emitup.
Now I am trying to trigger some validation on the field. How is this done? does it have to be triggered manually?

#2

Does your nested component do anything? If it is nothing more than a container for your dropdown I would consider refactoring to make your life easier. A benefit of Livewire components is that they encapsulate functionality for reuse elsewhere. Having a Livewire component that does nothing more than wrap an element doesn’t really make much sense.

#3

The validation should be handled inside the component. You could hook into the updated lifecycle hook and run the validation there. Assuming you have a property called $dropdown that holds the value of your dropdown it would look something like this:

public $dropdown;

protected $rules = [
    'dropdown' => // whatever your requirements are
];

public function updatedDropdown($value)
    {
        $this->validate();
    }

Now whenever $dropdown is changed it will re-run the validation.