Search code examples
angularjskendo-uiangular-ngmodelkendonumerictextbox

KendoUI Numeric box doesn't set ngModel correctly


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:

3.3333

but ngModel is still set to 3.33333333

Is this a Kendo-AngularJS bug?


Solution

  • 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({. . .