How to use TextInput with Mask and comma as decimalSeparator

[vanderbake]

In the Netherlands, we are one of the lucky countries to use a comma as decimalSeparator... I'm unable to get this right in the TextInput field with a Mask.

The field is stored in the database as a unsiged decimal (8, 2) value and is being used to track the weight of a product. Eg. product has a weight of 200.00 kilograms.

Forms\Components\TextInput::make('weight_kg')
                    ->numeric()
                    ->mask(fn (Forms\Components\TextInput\Mask $mask) => $mask
                        ->numeric()
                        ->decimalPlaces(2) // Set the number of digits after the decimal point.
                        ->decimalSeparator(',') // Add a separator for decimal numbers.
                        ->mapToDecimalSeparator([',']) // Map additional characters to the decimal separator.
                        ->normalizeZeros() // Append or remove zeros at the end of the number.
                        ->padFractionalZeros() // Pad zeros at the end of the number to always maintain the maximum number of decimal places.
                        ->thousandsSeparator('.'), // Add a separator for thousands.
                    ),

Generates:

To clearify: It gives me the value of 20.000,00 instead of 200,00.

Also tried removing/changing the mapToDecimalSeparator, but no luck. Couldn't find any additional examples in the docs and also couldn't find any similar issues in GitHub/Google, so I must be missing something.

Any help would be much appreciated 🙏

[fabioonet]

Hello, that's way worked for me:

Forms\Components\TextInput::make('price')
    ->mask(
        fn (TextInput\Mask $mask) => $mask
            ->patternBlocks([
                'money' => fn (Mask $mask) => $mask
                ->numeric()
                ->decimalPlaces(2)
                ->decimalSeparator(',')
                ->thousandsSeparator('.')
                ->mapToDecimalSeparator(['.'])
                ->padFractionalZeros()
                ->normalizeZeros(true)
        ])
        ->pattern('R$ money')
    )
    ->afterStateHydrated(function (TextInput $component, $state) {
        $component->state(str_replace(".",",",$state));
    })
,

I hope it helps

[bitsmyth]

Thanks!

[photojo]

Hi,

is it possible to set
->decimalSeparator(',')
->thousandsSeparator('.')
...
globally for the app?

[Christos-Papoulas]

I found this and worked just fine for me:

use Filament\Forms\Components\TextInput;
use Filament\Support\RawJs;
 
TextInput::make('price')
    ->mask(RawJs::make('$money($input)'))
    ->stripCharacters(',')
    ->numeric()

[kiryaba]

Thanks. This worked for me too!

[farhadrahmanii]

I found this and worked just fine for me:

use Filament\Forms\Components\TextInput;
use Filament\Support\RawJs;
 
TextInput::make('price')
    ->mask(RawJs::make('$money($input)'))
    ->stripCharacters(',')
    ->numeric()

it's working for me but I have used another method like afterStateupdate and live method but adding two textbox data is not working.

[silasrm]

This help me!

#9069 (comment)

[gtresnandika]

try this logic for filamenphp V3
use Filament\Forms\Components\TextInput;
use Filament\Support\RawJs;

TextInput::make('amount')
->label('Amount')
->numeric() // Ensure it's treated as a number
->mask(RawJs::make('$money($input, '.', ',')'))
->stripCharacters(',')
->required(),
this for 10,000,000.54

but when you need like 10.000.000,54 you need to dehydrate the data so it can be read as decimals like 10000000.54

is that so, you need to add something like
Forms\Components\TextInput::make('amount')
->label('Amount)')
->numeric() // Ensure it's treated as a number
->mask(RawJs::make('$money($input, ',', '.')')) // thousand= ., decimal = ,
->stripCharacters('.') // remove thousand separator
->inputMode('decimal')
->dehydrateStateUsing(fn ($state) => $state !== null
? str_replace(',', '.', $state) // change decimal separator into .
: null
)
->required(),