Dynamic Form Component

What I'm trying to achieve is to dynamically append additional form components to the parent form. The additional form components are encapsulated in a service class, and each service class has custom form components. When a user selects the service type from the dropdown, I want to take the selected state value, instantiate that service class to retrieve its form components, and then append those to the child container.

What I did:
I was able to replace the full form, but instead, I would like to append the additional form components to the parent form if possible.

public static function form(Form $form): Form
{
    $serviceTypeOption = ServiceTypeManager::options();
    return $form
        ->schema([
            TextInput::make('name'),
            Select::make('service_type')
                ->live()
                ->options($serviceTypeOption)
                ->afterStateUpdated(function (Select $component) use ($form) {
                    $state = $component->getState();
                    ServiceTypeManager::make($state)->form($form)->fill();
                })
        ]);
}

public static function form(Form $form): Form
{
    $serviceTypeOption = ServiceTypeManager::options();
    return $form
        ->schema([
            TextInput::make('name'),
            Select::make('service_type')
                ->live()
                ->options($serviceTypeOption)
                ->afterStateUpdated(function (Select $component) use ($form) {
                    $state = $component->getState();
                    ServiceTypeManager::make($state)->form($form)->fill();
                })
        ]);
}

class GoogleCalendarServiceType extends BaseServiceType
{
    public function form(Form $form): Form
    {
        return $form->schema([
            TextInput::make('slacker')->label('Slacker'),
        ]);
    }
}

class GoogleCalendarServiceType extends BaseServiceType
{
    public function form(Form $form): Form
    {
        return $form->schema([
            TextInput::make('slacker')->label('Slacker'),
        ]);
    }
}

Solution

Thank you! This is what I managed to get working.

 public static function form(Form $form): Form
    {
        $serviceTypeOption = ServiceTypeManager::options();
        return $form
            ->schema([
                TextInput::make('name'),
                Select::make('service_type')
                    ->live()
                    ->options($serviceTypeOption)
                    ->afterStateUpdated(function (Select $component) {
                        $component->getContainer()
                            ->getComponent('settings')
                            ->getChildComponentContainer()
                            ->fill();
                    }),
                Group::make(static function (Get $get) {
                    $value = $get('service_type');
                    if ($value) {
                        return ServiceTypeManager::make($value)->formComponents();
                    }
                    return [];
                })->statePath('settings')
                    ->key('settings')
            ]);
    }

 public static function form(Form $form): Form
    {
        $serviceTypeOption = ServiceTypeManager::options();
        return $form
            ->schema([
                TextInput::make('name'),
                Select::make('service_type')
                    ->live()
                    ->options($serviceTypeOption)
                    ->afterStateUpdated(function (Select $component) {
                        $component->getContainer()
                            ->getComponent('settings')
                            ->getChildComponentContainer()
                            ->fill();
                    }),
                Group::make(static function (Get $get) {
                    $value = $get('service_type');
                    if ($value) {
                        return ServiceTypeManager::make($value)->formComponents();
                    }
                    return [];
                })->statePath('settings')
                    ->key('settings')
            ]);
    }

Jump to solution

Dynamic Form Component

public static function form(Form $form): Form
{
    $serviceTypeOption = ServiceTypeManager::options();
    return $form
        ->schema([
            TextInput::make('name'),
            Select::make('service_type')
                ->live()
                ->options($serviceTypeOption)
                ->afterStateUpdated(function (Select $component) use ($form) {
                    $state = $component->getState();
                    ServiceTypeManager::make($state)->form($form)->fill();
                })
        ]);
}

public static function form(Form $form): Form
{
    $serviceTypeOption = ServiceTypeManager::options();
    return $form
        ->schema([
            TextInput::make('name'),
            Select::make('service_type')
                ->live()
                ->options($serviceTypeOption)
                ->afterStateUpdated(function (Select $component) use ($form) {
                    $state = $component->getState();
                    ServiceTypeManager::make($state)->form($form)->fill();
                })
        ]);
}

class GoogleCalendarServiceType extends BaseServiceType
{
    public function form(Form $form): Form
    {
        return $form->schema([
            TextInput::make('slacker')->label('Slacker'),
        ]);
    }
}

class GoogleCalendarServiceType extends BaseServiceType
{
    public function form(Form $form): Form
    {
        return $form->schema([
            TextInput::make('slacker')->label('Slacker'),
        ]);
    }
}

Solution

Thank you! This is what I managed to get working.

 public static function form(Form $form): Form
    {
        $serviceTypeOption = ServiceTypeManager::options();
        return $form
            ->schema([
                TextInput::make('name'),
                Select::make('service_type')
                    ->live()
                    ->options($serviceTypeOption)
                    ->afterStateUpdated(function (Select $component) {
                        $component->getContainer()
                            ->getComponent('settings')
                            ->getChildComponentContainer()
                            ->fill();
                    }),
                Group::make(static function (Get $get) {
                    $value = $get('service_type');
                    if ($value) {
                        return ServiceTypeManager::make($value)->formComponents();
                    }
                    return [];
                })->statePath('settings')
                    ->key('settings')
            ]);
    }

 public static function form(Form $form): Form
    {
        $serviceTypeOption = ServiceTypeManager::options();
        return $form
            ->schema([
                TextInput::make('name'),
                Select::make('service_type')
                    ->live()
                    ->options($serviceTypeOption)
                    ->afterStateUpdated(function (Select $component) {
                        $component->getContainer()
                            ->getComponent('settings')
                            ->getChildComponentContainer()
                            ->fill();
                    }),
                Group::make(static function (Get $get) {
                    $value = $get('service_type');
                    if ($value) {
                        return ServiceTypeManager::make($value)->formComponents();
                    }
                    return [];
                })->statePath('settings')
                    ->key('settings')
            ]);
    }

Jump to solution

Dynamic Form Component

Dynamic Form Component

Similar Threads

Similar Threads

Similar Threads