How to expand Edit form based for Toggle state?

Hello

I have tried to expand edit form based of Toggle state.

in class EditSite extends EditRecord.

Added mount:

public function mount(string|int $record): void    
  {
    parent::mount($record);        

    if ($record) {      
       $this->initializeForEdit($record);
    } else {   
       $this->initializeForCreate();
    }
 }

Inside protected function initializeForEdit($record)

   protected function initializeForEdit($record)
   {
    $form = $this->form;
    $toggleState = $this->form->getState()['idn_only'] ?? null;           

    if( $toggleState == true)
   {             
      dump('Edit Mode');      
      $extendForm = $this->getFormSchema();      

   }       

 }

--> First part is calling form and check if toggle named ['idn_only'] is true. --> then I try to add new TextInput which gets Punycode version fo domain name.

--> here is public function getFormSchema()

     public function getFormSchema(): array
     {        
       return [

        TextInput::make('web_root')
        ->label('Kotihakemisto domainille ilman ääkkösiä')
        ->visible(fn ($get) => $get('web_root_folder_visible') ?? false),
     ];        
     
   }

in my main Resourse file: class SiteResource extends Resource

       Group::make()
          ->schema([
              Toggle::make('idn_only')
              ->reactive()               
               ->default(false)              
              ->onColor('success')
              ->offColor('danger')              
              ->label('Kun domain on vain idn-muodossa (hässäkkä-muodossa)')
              ->afterStateUpdated(function (Forms\Components\Toggle $component, $set, $state) {
                $set('web_root_folder_visible', $state);                 
              }),
                Forms\Components\TextInput::make('web_root')         
                ->label('Kotihakemisto domainille ilman ääkkösiä')                        
                ->visible(fn ($get) => $get('web_root_folder_visible') ?? false),
          ]),

--> this part works when new record is added and Toggle state is false. --> but not show TextInput when in edit mode.

Thanks MikroMike

LaryAI

1 year ago

Level 58

To address the issue of expanding the edit form based on the toggle state, you need to ensure that the visibility of the TextInput is correctly managed both when creating a new record and when editing an existing one. The problem seems to be that the visibility logic for the TextInput is not being triggered correctly in edit mode.

Here's a step-by-step solution to ensure that the TextInput visibility is correctly updated based on the toggle state:

Ensure Reactive State Management: Make sure that the state management for the toggle is reactive and updates the visibility of the TextInput accordingly.
Initialize State in Edit Mode: When in edit mode, ensure that the initial state of the toggle is correctly set, so that the visibility of the TextInput is determined based on the current state of the record.
Update the initializeForEdit Method: Ensure that the initializeForEdit method sets the initial state of the toggle and any dependent states.

Here's how you can modify your code:

Update the `initializeForEdit` Method

Ensure that the initializeForEdit method sets the initial state for web_root_folder_visible based on the current state of idn_only.

protected function initializeForEdit($record)
{
    $form = $this->form;
    $toggleState = $form->getState()['idn_only'] ?? null;

    // Set the initial state for visibility based on the toggle state
    $form->fill([
        'web_root_folder_visible' => $toggleState,
    ]);

    if ($toggleState) {
        dump('Edit Mode');
        $extendForm = $this->getFormSchema();
    }
}

Ensure Reactive State in the Resource

Make sure the toggle is reactive and updates the visibility state:

Group::make()
    ->schema([
        Toggle::make('idn_only')
            ->reactive()
            ->default(false)
            ->onColor('success')
            ->offColor('danger')
            ->label('Kun domain on vain idn-muodossa (hässäkkä-muodossa)')
            ->afterStateUpdated(function (Forms\Components\Toggle $component, $set, $state) {
                $set('web_root_folder_visible', $state);
            }),
        Forms\Components\TextInput::make('web_root')
            ->label('Kotihakemisto domainille ilman ääkkösiä')
            ->visible(fn ($get) => $get('web_root_folder_visible') ?? false),
    ]),

Verify Form Schema

Ensure that the getFormSchema method is correctly returning the form components and that the visibility logic is consistent with the state management.

By ensuring that the initial state is set correctly in initializeForEdit and that the toggle is reactive, the TextInput should appear correctly in both create and edit modes based on the toggle state.

Please or to participate in this conversation.

How to expand Edit form based for Toggle state?

Update the initializeForEdit Method

Ensure Reactive State in the Resource

Verify Form Schema

Update the `initializeForEdit` Method