angularJS/breeze wipes out 'intermediate' negative number entry (HTML5)

Question

Fighting a little bit of a battle here. I have an HTML5 SPA app based on John Papa's methodology. I have a series of input boxes that are supposed to accept positive/negative real numbers.

Similar to here, when a user types the first '-' key as part of a negative number, either breeze (1.5.2) or angularjs (1.3.15) wipes it out because it's not a valid number at that point. Per the post, I added to the input the ng-model-options:

<input 
 ng-model-options="{ updateOn: 'blur' }"
 ng-model="rdg.Reading.ManualValue"
 step="any" type="number"/>

and that helps, but the problem is that there are usability issues, as was mentioned in that post. Previously, the moment pressed the first key, the view gets notification that something has changed and all is well. Now you actually have to leave the control, which could lead to confusion.

There was a second suggestion, namely adding:

ng-model-options="{allowInvalid: true}" 

Which sounded conceptually way better, but this did not have any effect - hence back to the onBlur.

I could really use some advice on how to make this better. OnBlur helped, but I can just hear the complaints I'm going to get because of this non-consistent way of entering numbers.

Thanks for any help. Corey.

Answer 1

The input is getting reset when breeze parses and updates the entity. To prevent this from happening, you can add breeze's z-float angular directive to the input.

Add the script to the page:

<script src="https://rawgithub.com/Breeze/breeze.js.labs/master/breeze.directives.js" ></script>

Add the module as a dependency to your app:

angular.module('yourApp', ['breeze.directives']);

And add the z-float directive to your input:

<input data-ng-model="vm.person.balance" z-float placeholder="Balance" />

See http://www.getbreezenow.com/breeze-labs/breezedirectivesfloat

The cause is Angular's eager data binding. Angular sends each keystroke through to the data bound model property.

That becomes a problem when Breeze parses data entry before the user has finished typing. The user could be in the middle of data entry when Breeze parsing does something to her intermediate value and updates the property with something else before she has a chance to complete her thought.

For more details, and to see it in action, check out their Plunker