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.)

I had the [same problem](http://stackoverflow.com/a/22296446/1719181), it was breeze that parse the string when the data change, this makes it impossible to get a number after the decimal. — qorsmond, Mar 10 '14 at 12:45

score 2 · Answer 1 · answered Jul 31 '14 at 12:08

2

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

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

answered Jul 31 '14 at 12:08

sriyan

54
10

score 1 · Accepted Answer · answered Aug 28 '14 at 09:28

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

answered Aug 28 '14 at 09:28

fops

384
1
13

score 0 · Answer 3 · edited May 23 '17 at 11:43

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.

score 0 · Answer 4 · edited Jan 22 '14 at 16:54

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" />

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

4 Answers4