How to Add a Prefix to a Form Input Field in Filament

[Parsa-Biazar]

Package

Form builder

Package Version

v3.2.131

How can we help you?

Hello Filament community,

I’m encountering an issue when trying to dynamically add a prefix (e.g., a leading zero) to a TextInput field in a Filament form for display purposes while ensuring the value is stored without the prefix in the database. My setup is as follows:

The database stores the value without the prefix (e.g., 91124563255).
I want the form to display the value with the prefix (e.g., 091124563255).
Upon saving, the value should be stored without the prefix.
Here’s the code I’m currently using:

Grid::make('mobile')
                            ->relationship('user')
                            ->schema([                    
                                TextInput::make('mobile')
                                    ->afterStateHydrated(function ($state) {
                                        return '0' . $state;
                                    })
                                    ->dehydrateStateUsing(function ($state) {
                                        return ltrim($state, '0');
                                    })
                                    ->tel()
                                    ->label(trans('admin.mobile'))
                                    ->length('11')
                                    ->required(),
                            ])

i know that i have to use ->formatStateUsing( function ($state){ return '0' . $state; })
but that does not work becuse my field its inside a Grid::make()
i did that Grid::make becuse if i dont do that, relation wont load !

However, this solution does not work as expected. The field doesn’t properly format the value when the form is opened, and sometimes the changes are not reflected upon saving.

I’ve referred to the documentation and GitHub discussions but couldn’t find a working solution for this specific case.

Can someone provide guidance or suggest an alternative approach to achieve this functionality?

Any help would be greatly appreciated.

Thank you!

[leandrocfe]

use a custom cast

User.php

protected function casts(): array
{
    return [
        'mobile' => PhoneNumber::class,
    ];
}

PhoneNumber.php

/**
 * Cast the given value.
 *
 * @param  array<string, mixed>  $attributes
 */
public function get(Model $model, string $key, mixed $value, array $attributes): mixed
{
    return str($value)->prepend('0')->toString();
}

/**
 * Prepare the given value for storage.
 *
 * @param  array<string, mixed>  $attributes
 */
public function set(Model $model, string $key, mixed $value, array $attributes): mixed
{
    $newValue = str($value)
        ->when(str($value)->startsWith('0'), fn ($str) => $str->after('0'))
        ->toString();

    return $newValue;
}

[Parsa-Biazar]

Thank you very much for your response! The issue is resolved now, and I really appreciate the help.

However, I still don’t fully understand two things, and I would be grateful if you could clarify:

1. Why did the ->afterStateHydrated() method not work when the input was inside a Grid::make() but worked fine when I moved it out of the grid? Is there a specific limitation or behavior I should be aware of when using grids in this context?

2. For some of my relationships, especially when dealing with multi-level relations (e.g., admin → user → roles for role management), I must use a Grid, Section, or Fieldset and apply the ->relationship() method on the input. This seems to be necessary to handle the relationships properly. Could you shed some light on why this is the case and if there’s an alternative approach?

These are two of the most significant points of confusion for me in Filament. I would love to understand them better and improve my expertise in using Filament effectively.

Thank you again for your support!

[leandrocfe]

1 - I think because you are using a relationship
2 - saving form fields to a single relationship
You can also use a Group layout component