How to use actions with livewire forms?

[artworkad]

Hello 👋,

I am playing around with livewire and actions. I wanted to refactor CRUD logic into actions and have livewire components act like simple presenters. I came accross two challenges for create and update operations.

First, livewire requires you do provide a $rules property for data binding and validation. Where would you put this information? I think it belongs into the corresponding action. I came up with following action:

class UpsertNote
{
    use AsAction;
    use WithAttributes;

    public function rules(): array
    {
        return [
            'note.title' => 'required'
        ];
    }

    public function handle(Note $note, array $attributes = []): void
    {
        $operation = $note->id ? 'update' : 'create';

        Gate::authorize("consultations.notes.$operation", $note);

        $this->set('note', $note)->fill($attributes);

        $this->validateAttributes();

        $note->save();

        Log::info('Notes/' . ucfirst($operation), ['note' => $note->id]);
    }
}

Inside the livewire component I define a rules method that calls the rules method of the action:

protected function rules(): array
{
    return UpsertNote::make()->rules();
}

With this wiring I can manage the rules in a central place, instead of having them in both places. Feels like I am cheating on livewire here but on the other hand I consolidate my business logic through actions. How are you solving this challenge?

Second, $this->validateAttributes() in the action behaves differently compared to livewire's $this->validate(). When you update a note in my example with an empty title, an error message is shown. When you update it a second time with a correct title the validation passes but the error message is still present. Livewire has a ValidatesInput trait with some addition validation sugar https://github.com/livewire/livewire/blob/2f06b28be0aa0d5bf0a4598b4b571d7d1a24e5c1/src/ComponentConcerns/ValidatesInput.php#L144 to update the error bag.

There are two ways to solve this. First call $this->validate() after the action was run. Second enable real time validation:

public function updated($field): void
{
    $this->validateOnly($field);
}

This will keep the error bag in sync with the validation state. What is your take on this? Would love to hear your opinions.