1

I have a problem at hand due to how numbers are written in my native language German. My Problem is that with German as browser language, the browsers behave differently.

<input matInput="primary" [formControlName]="question.key"
       [id]="question.key" [type]="question.type">

I create my forms dynamically.

Now, question.type is number.

Chrome:

You can put in , or . the form will save it with a . eg: 11,5 or 11.5 becomes 11.5. The Form also accepts both , and .

Firefox:

In Firefox you can't put in . the type="number" prevents it. For English browser language its the opposite (as far as I'm aware). You can't put in ,.

Internet Explorer 11:

IE allows both , and . to be put in, however only the ones with . will get recognized as number.

I need all of them to work with , and .

One extra thing. In my application I want to track these numbers in the URL. Then upon reading those URL params. Which are by default Strings. Number('11,1') becomes NaN and Number(11,1) becomes 11

Jason Aller
  • 3,541
  • 28
  • 38
  • 38
Nikolai Kiefer
  • 568
  • 5
  • 15
  • 1
    You probably need custom validation as well as custom logic for displaying the numbers based on culture. So you'd need to store the number as the raw value, e.g., `1000.52` and then apply the culture setting for display -> `1 000,52` or `1,000.52` or `1.000,52`. – VLAZ Sep 11 '19 at 08:23
  • Maybe try to avoid the `question.type` attribute and use `text` as your general input type. Then you can probably use the [DecimalPipe](https://angular.io/api/common/DecimalPipe) to convert the result into a valid number. – SparkFountain Sep 11 '19 at 10:09
  • See this answer for i18n number parsing: https://stackoverflow.com/a/42000120/1164465 – Christopher Peisert Sep 11 '19 at 11:48

0 Answers0