KendoUI Numeric box doesn't set ngModel correctly

[slavede]

If I initialize input box which has ngModel attached to it like this:

angular.element(element.find("input")).kendoNumericTextBox({
 decimals : 4,
 format : "#.####"), // to match step and format
 step : step,
 value : value,
 min : scope.min,
 max : scope.max
});

Now, I enter value:

3.33333333

in it and it gets displayed correctly (trimmed to 4 decimals):

3.3333

but ngModel is still set to 3.33333333

[mishoo]

This is contradictory with #135, #136, #152, as I mentioned. Some people expect the model to contain the “logical” value (i.e. a Date object instead of a string), and others expect the model to contain the string content of the input field. Currently we pass the value of the widget, and I see no way to make both sides happy. :-\

So in your case, the model is 3.33333333 because that's what widget.value() returns.

[slavede]

:( is there a way to get value what's in widget to update the model manually then?

[mishoo]

You mean to get the value of the input field?

[slavede]

Yes, so after it's "trimmed" to 3.3333, how can I bind that value to ng-model? I've tried with change function but in there value is still 3.3333333333....

[mishoo]

You can just use jQuery, for example $("#yourInput").val() (or if you're in the change function, you could use this.element.val()) to get the content of the element, rather than widget's value.

[mishoo]

It seems to me that the operation mode that most Angular users would expect is to place in the model the value of the input field, as a string — but this breaks #135, #136 etc. I was suggesting in a comment there to do just that, and use something different for the widget.value() binding — maybe some k-value-model attribute to specify the variable to bind for widget.value(). Do you think that would work? (I got no answers in the old thread). In any case, it would break backward compatibility.

[slavede]

I did this as workaround (I have a scope variable model : "=ngModel"):

scope.$watch("model", function(newValue, oldValue) {
 if (newValue !== undefined) {
   kendoNumericBox.data("kendoNumericTextBox").value(newValue);
   scope.model = kendoNumericBox.data("kendoNumericTextBox").value()
 }
});

While saying this, there is also an issue if you update ngModel from controller it doesn't reflect in input until you click in it so I also did:

 scope.model = kendoNumericBox.data("kendoNumericTextBox").value();

to retrieve value back again so it's validated with kendoNumericTextBox

where kendoNumericBox is return value of kendoNumericTextBox constructor:

 kendoNumericBox = elemenet.kendoNumericTextBox({. . .

[slavede]

Shall we close this as invalid then?