Execute an action on checkbox toggle

I would like to reset the password and password_confirmation fields when I check or uncheck the checkbox button, so the passwords start from a clean slate all the time.

I am not sure if it can be done via Livewire or Alpine somehow or there is an inbuilt functionality inside Filament.

My code:

Checkbox::make('password_change_checkbox')
    ->label('Change your password')
    ->visibleOn('edit')
    ->live(),

TextInput::make('password')
    ->dehydrated(fn(Get $get): bool => $get('password') != '')
    ->live()
    ->afterStateUpdated(
        function (
          Forms\Contracts\HasForms $livewire, 
          Forms\Components\TextInput $component
        ) {
          $livewire->form->getState();
    })
    ->confirmed()
    ->required()
    ->label('Password') 
    ->visibleOn('edit')
    ->hidden(fn(Get $get): bool => !$get('password_change_checkbox')),

TextInput::make('password_confirmation')
    ->dehydrated(false)
    ->live()
    ->afterStateUpdated(
        function (
          Forms\Contracts\HasForms $livewire, 
          Forms\Components\TextInput $component
        ) {
          $livewire->form->getState();
    })
    ->required()
    ->label('Repeat password') 
    ->visibleOn('edit')
    ->hidden(fn(Get $get): bool => !$get('password_change_checkbox'))

Checkbox::make('password_change_checkbox')
    ->label('Change your password')
    ->visibleOn('edit')
    ->live(),

TextInput::make('password')
    ->dehydrated(fn(Get $get): bool => $get('password') != '')
    ->live()
    ->afterStateUpdated(
        function (
          Forms\Contracts\HasForms $livewire, 
          Forms\Components\TextInput $component
        ) {
          $livewire->form->getState();
    })
    ->confirmed()
    ->required()
    ->label('Password') 
    ->visibleOn('edit')
    ->hidden(fn(Get $get): bool => !$get('password_change_checkbox')),

TextInput::make('password_confirmation')
    ->dehydrated(false)
    ->live()
    ->afterStateUpdated(
        function (
          Forms\Contracts\HasForms $livewire, 
          Forms\Components\TextInput $component
        ) {
          $livewire->form->getState();
    })
    ->required()
    ->label('Repeat password') 
    ->visibleOn('edit')
    ->hidden(fn(Get $get): bool => !$get('password_change_checkbox'))

Perhaps adding afterStateUpdated() to Checkbox::make() ? But how to target password and password_confirmation fields only? And make them clear up both when clicking on the checkbox (for both show and hide states)?

Checkbox::make('password_change_checkbox')
    ->label('Change your password')
    ->visibleOn('edit')
    ->live(),

TextInput::make('password')
    ->dehydrated(fn(Get $get): bool => $get('password') != '')
    ->live()
    ->afterStateUpdated(
        function (
          Forms\Contracts\HasForms $livewire, 
          Forms\Components\TextInput $component
        ) {
          $livewire->form->getState();
    })
    ->confirmed()
    ->required()
    ->label('Password') 
    ->visibleOn('edit')
    ->hidden(fn(Get $get): bool => !$get('password_change_checkbox')),

TextInput::make('password_confirmation')
    ->dehydrated(false)
    ->live()
    ->afterStateUpdated(
        function (
          Forms\Contracts\HasForms $livewire, 
          Forms\Components\TextInput $component
        ) {
          $livewire->form->getState();
    })
    ->required()
    ->label('Repeat password') 
    ->visibleOn('edit')
    ->hidden(fn(Get $get): bool => !$get('password_change_checkbox'))

Checkbox::make('password_change_checkbox')
    ->label('Change your password')
    ->visibleOn('edit')
    ->live(),

TextInput::make('password')
    ->dehydrated(fn(Get $get): bool => $get('password') != '')
    ->live()
    ->afterStateUpdated(
        function (
          Forms\Contracts\HasForms $livewire, 
          Forms\Components\TextInput $component
        ) {
          $livewire->form->getState();
    })
    ->confirmed()
    ->required()
    ->label('Password') 
    ->visibleOn('edit')
    ->hidden(fn(Get $get): bool => !$get('password_change_checkbox')),

TextInput::make('password_confirmation')
    ->dehydrated(false)
    ->live()
    ->afterStateUpdated(
        function (
          Forms\Contracts\HasForms $livewire, 
          Forms\Components\TextInput $component
        ) {
          $livewire->form->getState();
    })
    ->required()
    ->label('Repeat password') 
    ->visibleOn('edit')
    ->hidden(fn(Get $get): bool => !$get('password_change_checkbox'))

Execute an action on checkbox toggle

Similar Threads

Execute an action on checkbox toggle

Similar Threads

Similar Threads

Similar Threads