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•5mo 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•5mo ago

You can enable unsaved changes alert if that suits?

toeknee•5mo ago

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

Configuration - Panels - Filament

NicoleOP•5mo 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•5mo 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•5mo ago

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

NicoleOP•5mo ago

Should this be inserted inside extraAttr?

toeknee•5mo ago

Yeah on the button yeah

charlie•5mo 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•5mo 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•5mo ago

direct.class is native livewire event

charlie•5mo 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•5mo ago

and enabled-class would be your tailwind or custom classes

NicoleOP•5mo ago

Cool. It worked!

NicoleOP•5mo ago

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

toeknee•5mo 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•5mo 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•5mo ago

strange... then I am a little unsure

NicoleOP•5mo 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?