How can I check for any unsaved changes in the edit form?

I want to track when there are changes in the edit form. If no changes are made, I want the button to be disabled.

Solution:

What about: wire:dirty.class="enabled-class"...

19 Replies

NicoleOP•3w ago

class EditProduct extends EditRecord
{
    protected static string $resource = ProductResource::class;

    protected function getHeaderActions(): array
    {
        return [
            Actions\DeleteAction::make(),
        ];
    }

    protected function getSaveFormAction(): Actions\Action
    {
        $record = $this->getRecord();

        return Actions\Action::make('save')
            ->label('Save changes')
            ->submit('save')
            ->keyBindings(['mod+s'])
            ->disabled(fn () => !$record->wasChanged());
    }
}

class EditProduct extends EditRecord
{
    protected static string $resource = ProductResource::class;

    protected function getHeaderActions(): array
    {
        return [
            Actions\DeleteAction::make(),
        ];
    }

    protected function getSaveFormAction(): Actions\Action
    {
        $record = $this->getRecord();

        return Actions\Action::make('save')
            ->label('Save changes')
            ->submit('save')
            ->keyBindings(['mod+s'])
            ->disabled(fn () => !$record->wasChanged());
    }
}

toeknee•3w ago

You can enable unsaved changes alert if that suits?

toeknee•3w ago

https://filamentphp.com/docs/3.x/panels/configuration#unsaved-changes-alerts

Configuration - Panels - Filament

NicoleOP•3w ago

My use case is to disable the button while there is no changes yet to form fields, Sir. Tried it like this but seems not working

protected function getSaveFormAction(): Actions\Action
    {
        return Actions\Action::make('save')
            ->label('Save changes')
            ->submit('save')
            ->keyBindings(['mod+s'])
            ->extraAttributes([
                'x-bind:disabled' => '$wire.form.isDirty',
            ]);
    }

protected function getSaveFormAction(): Actions\Action
    {
        return Actions\Action::make('save')
            ->label('Save changes')
            ->submit('save')
            ->keyBindings(['mod+s'])
            ->extraAttributes([
                'x-bind:disabled' => '$wire.form.isDirty',
            ]);
    }

charlie•3w ago

I think you could do that in Alpine with something like:

if (
  window.jsMd5(
      JSON.stringify($wire.data).replace(/\\/g, ''),
  ) === $wire.savedDataHash ||
  $wire?.__instance?.effects?.redirect
)

if (
  window.jsMd5(
      JSON.stringify($wire.data).replace(/\\/g, ''),
  ) === $wire.savedDataHash ||
  $wire?.__instance?.effects?.redirect
)

(copied from vendor/filament/filament/resources/views/components/page/unsaved-data-changes-alert.blade.php)

Solution

toeknee•3w ago

What about: wire:dirty.class="enabled-class"

NicoleOP•3w ago

Should this be inserted inside extraAttr?

toeknee•3w ago

Yeah on the button yeah

charlie•3w ago

Tested and approved. I think I'll use that too! Here's how you'd use it @Nicole :

protected function getSaveFormAction(): Actions\Action
{
    return Actions\Action::make('save')
        ->extraAttributes([
            'wire:dirty.class' => 'enabled-class',
        ]);
}

protected function getSaveFormAction(): Actions\Action
{
    return Actions\Action::make('save')
        ->extraAttributes([
            'wire:dirty.class' => 'enabled-class',
        ]);
}

NicoleOP•3w ago

Oh, thanks, Sirs, I'll try. By the way, this is the event? wire:dirty.class? And this one a custom class?enabled-class

toeknee•3w ago

direct.class is native livewire event

charlie•3w ago

wire:dirty is a livewire directive: https://livewire.laravel.com/docs/wire-dirty And you should replace enabled-class with any css class you want

Laravel

wire:dirty | Laravel

A full-stack framework for Laravel that takes the pain out of building dynamic UIs.

toeknee•3w ago

and enabled-class would be your tailwind or custom classes

NicoleOP•3w ago

Cool. It worked!

NicoleOP•2w ago

@toeknee @charlie I added SpatieMediaLibraryFileUpload, but when I remove or add a new image, wire:dirty does not work. Any idea Sirs?

toeknee•2w ago

Probably doesn't trigger a wire dirty because the form isn't dirty as it's a relationship. You could try setting after state updated a hidden field say 'ImagesUploaded' = true

NicoleOP•2w ago

I tried it like this

->afterStateUpdated(function(Set $set, Livewire $livewire) {
                                        $set('is_file_modified', true);
                                    })

->afterStateUpdated(function(Set $set, Livewire $livewire) {
                                        $set('is_file_modified', true);
                                    })

But still doesn't trigger wire:dirty

toeknee•2w ago

strange... then I am a little unsure

NicoleOP•2w ago

Is there any way to manually call dirty? It seems it didn't consider this way $set('is_file_modified', true); as dirty

Gaming

Programming

How can I check for any unsaved changes in the edit form?

Did you find this page helpful?