breeze binding to decimal in a input html only allows [0-9]

Question

i'm using breeze 1.4.5 and angular 1.2.1 i'm binding directly to a breeze entity to a property of type decimal using the input type "text"

 <input class="form-control" type="text" ng-model="vm.transaction.ListPrice" />

when doing this it only accepts numbers 0-9 in this field (comma, decimal point and other characters are ignored)

another input which binds to a text property of an entity just works fine so it has to be something behind the scenes which i don't understand

(i don't use type "number" because i don't like the buttons for the up/down selection in the input field.)

Answer 1

Ok now that some time went by the guys at breeze came up with a solution (zfloat directive for angular):

http://www.breezejs.com/breeze-labs/breezedirectivesfloat

Answer 2

If the problem still there, try using breeze.directives. zFloat directive solved the problem.

http://www.breezejs.com/breeze-labs/breezedirectivesfloat

Answer 3

Use number input type and hide arrows with this css rule

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}  

See this answer for alternative methods.
I think using number input type is easy and syntactically better than using text.

Answer 4

I used the recommendation above from notme but needed to add a bit to get the keep the validation from being a problem.

The input type of number allowed the decimal points, so that was good.

The CSS from notme turned off the spinners, that also helped.

However, bootstrap still made the field highlight red when a decimal was in the field. This bit of CSS will make the field look blue when there are decimal points:

input:focus:invalid { color:#333; border-color: rgba(82, 168, 236, 0.8); } 

input:focus:invalid:focus, 
textarea:focus:invalid:focus, 
select:focus:invalid:focus { 
    border-color: rgba(82, 168, 236, 0.8); 
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); 
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); 
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); 

}

Alternate approach to solve bootstrap validation issue with decimal

Use step="any" as in:

<input type="number" step="any" />