How to store nested components in big form

[Slon]

I have a big form with several tabs. Each tab is a separate component. Common button to save the whole form.

Two questions:

1. How do I do form validation on each component when saving? Using emit?
2. How do I collect data from all the components to save to the database?

[prospero]

My modest opinion…this is epic! Ufff. Quickly I have something in mind, as I can see the real matter isn’t save to db because on common save button I can emit to every component for store like:

public function save()
{
   $this->emit('tab1');
   $this->emit('tab2');
   ....
}

and every component that correspond be listening like:

component 1

protected $listeners = [
   'tab1' => 'store'
]
...
public function store()
{
   //do your stuff
}

and for every others.
Like I saw, the real headache is validate all that data, because even though emitting to validate on each component how you get or advice the tab with errors??? Maybe some guy here have a better idea or solution for you…mine, is that you improve validate using closures for catch if fails all that data in parent component. Isn’t easy job but maybe you can customize it. I’m doing something like that, different tabs but in a single component…sorry if I can bring you any better idea.

[dcblogdev]

have you considered having each component viewable like how jetstream does with the profile? This would require each component to have its own save button and save method.

If you need tags you can show the errors above the tabs overall but you would still have the problem of not knowing which tabs where causing the problem, what you could do is highlight the tab red when there is a validation error on that tab so visually the user can see there’s an alert on a tab.