NumberField

Flow
1

Hi, I’m trying to extend a TextField so it can only accept numbers (with thousand separator [,]
and 2 decimals [.]
) ? Tried several patterns already, with no success. Any help will be really appreciated!

Cheers.

2

Hello Matias,

I’m using inputmask without problems.

https://vaadin.com/directory/component/inputmask/samples

Regards

3

Hi Phillippe, thanks for answering, but I’m using vaadin 11 :confused:

4

Perhaps something like this?

   public TextField numberField(String label, String width) {
      TextField t = new TextField(label);
      t.setPattern("[0-9.,]
*");
      t.setPreventInvalidInput(true);
      t.getElement().setAttribute("theme", "align-center");
      if (width != null)
         t.setWidth(width);
      return t;
   }
5

Hi Martin!
I already use that pattern but it is not what I looking for because it allows the following inputs:

  • 0…3
  • 1000,.1
  • 1000.00,1
  • etc

Thanks anyways

6

EDIT!

Maybe this one?

^(0|([1-9] [0-9] {0,2}(,[0-9] {3})*))(.[0-9] {1,2})?$

7

Didn’t work Lars :frowning:

8

The regex should be ok - mostly.

In html you use it in the form tag. See https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_pattern
Maybe you can write a template with these. I don’t know.

You could also validate the input on the server. I know, not exactly what you had in your mind. So or so, you should validate the input on the server too. Some nerds could send false data if you don’t do it there too.

9

There is a Pull request for creating a numeric field (client-side component).

https://github.com/vaadin/vaadin-text-field/tree/feature/vaadin-number-field

You could try to use that component, it might be integrated in the future inside Vaadin.

10

Thank you guys!

11

Hello, I have the NumberField, but how can I set decimals?

numberField.setPattern("[0-9.,]
*");

but nothing.

12

Hi,

Did you find any solution? I am looking to format it as a currency, so need the commas to be displayed.

13

I also want to display a currency.
For this I use BigDecimalField and the method … setSuffixComponent (new Label (“EUR”));

//example:
        final BigDecimalField price = new BigDecimalField("Price");
        price.setSuffixComponent(new Label("EUR"));
        price.setValue(BigDecimal.valueOf(2015.23));

I haven’t found a thousand separators either …

Why is this not already offered by default?

14

SuperBigDecimalField from https://vaadin.com/directory/component/superfields supports thousands separators.

15

Thank you. That’s working! :slight_smile:

Why is this not included in the default VAADIN Edition?

I use the latest LTS-Version 14.3.7

Maven showes a lot of conflics!

Is something like that fixed …? Where can I report this as a BUG?


18440394.png

16

If you’re not sure which repository to report issues at, you can use e.g. https://github.com/vaadin/flow/issues . Depending on the case, it may be moved to a different repository, but that’s not a problem. Regarding the thousands formatting, there’s already an open enhancement ticket here: https://github.com/vaadin/vaadin-text-field-flow/issues/291

17

ok thanks