Filament•11mo ago

How can use Pattern in my TextInput?

I have an input where I want to allow the entry of a maximum of 3 numbers separated from a . basically as if it were a float but instead of a comma a dot, I was searching and in the version of Filamentphp 2 it exists this: ->mask(fn (TextInput\Mask $mask) => $mask->pattern('+{7}(000)000-00-00'))

 Forms\Components\TextInput::make('size')
    //->rules(['max:3'])
    ->maxLength(3)
    ->live()
    ->placeholder('Ejemplo 1.70')
    ->numeric('^\d+(\.\d{1,2})?$')
    ->label('Altura'),

 Forms\Components\TextInput::make('size')
    //->rules(['max:3'])
    ->maxLength(3)
    ->live()
    ->placeholder('Ejemplo 1.70')
    ->numeric('^\d+(\.\d{1,2})?$')
    ->label('Altura'),

i try to use this:

->mask(function (TextInput\Mask $mask) {
        $mask->pattern('9{1,}.99');
    })

->mask(function (TextInput\Mask $mask) {
        $mask->pattern('9{1,}.99');
    })

But this is not working, how can do this? Thank you.

3 Replies

LeandroFerreira•11mo ago

https://filamentphp.com/docs/3.x/forms/fields/text-input#input-masking

Text input - Form Builder - Filament

TranceCodeOP•11mo ago

i Fix using this code!

Forms\Components\TextInput::make('size')
   ->placeholder('Ejemplo 1.70')
   ->live()
   ->numeric()
   ->mask(RawJs::make(<<<'JS'
      /^(\d{1,3})(\d{0,2})?$/.test($input) ? $input.replace(/^(\d{1})(\d{0,2})?$/, '$1.$2') : ''
   JS))
   ->maxLength(3)
   ->label('Altura'),

Forms\Components\TextInput::make('size')
   ->placeholder('Ejemplo 1.70')
   ->live()
   ->numeric()
   ->mask(RawJs::make(<<<'JS'
      /^(\d{1,3})(\d{0,2})?$/.test($input) ? $input.replace(/^(\d{1})(\d{0,2})?$/, '$1.$2') : ''
   JS))
   ->maxLength(3)
   ->label('Altura'),

However, what I do not take into account is the maximum number of characters for this input, I tried 3 or 4 and it always accepts 3.33333333333 or 4.4444444, what would be ideal is for it to accept a maximum of 1.22, that is, a maximum length of 4 with the period included...

awcodes•11mo ago

I believe there is a ->pattern() modifier that will add an actual pattern attribute to the input. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern

MDN Web Docs

HTML attribute: pattern - HTML: HyperText Markup Language | MDN

The pattern attribute specifies a regular expression the form control's value should match. If a non-null value doesn't conform to the constraints set by the pattern value, the ValidityState object's read-only patternMismatch property will be true.

Gaming

Programming

How can use Pattern in my TextInput?