guillotinaweb / ngx-schema-form

HTML form generation based on JSON Schema
MIT License
485 stars 174 forks source link

Unable to enter floating numbers with 0 after decimal point #332

Open MyleneSimon opened 4 years ago

MyleneSimon commented 4 years ago

We are using the library to generate forms to configure scientific algorithms, and users are often typing numbers looking like 0.00xxx. The issue is that while trying to enter a floating number with a 0 after the decimal point, the decimal point and 0 part gets removed.

Some examples:

This is getting really confusing for our users, as the only way the enter the desired value right now would be to type 1.23 and then go back to add the 0 after the point, which is not ideal. And if they don't pay attention, they could end up with values that are completely incorrect, which would then be used in their computations.

Are there any fix or workaround available for that issue?

ebrehault commented 4 years ago

That's due to the way JavaScript is handling numbers.

> parseFloat('1.0')
1
> a=1.0
> a
1
> a===1
true
> a===1.0
true

There is no difference between 1 and 1.0, so no matter how ngx-schema-form handles it, if we use a number field and the entered value is 1.0, we will get 1 as a resulting value.

I am afraid the only way to manage it is to use a string field, so the value will be "1.0" (you can implement a FloatStringWidget widget that would render a <input type="number"> to make sure users only enters numeric values), and then your backend will have to convert it into a float.

MyleneSimon commented 4 years ago

Thanks for the explanation, we will try the FloatStringWidget. So it that case, in the schema for example we would declare the field as:

{
      "type": "string",
      "widget": "floatstring"
}

and then have a FloatStringWidget similar to the IntegerWidget (the one currently used for numbers) registered in WidgetsRegistry, is that correct?

akanduru commented 1 year ago

For me, this is working correctly when I change input's attribute from [attr.type]="'number'" to type="number" in the template of IntegerWidget. (projects/schema-form/src/lib/defaultwidgets/integer/integer.widget.ts:17).

When I use type="number", the type of control's value is correctly interpreted as number. The other syntax gives string representation which is causing the problem. One would expect both syntaxes should produce the same result yielding number. It looks like a bug in angular.