Numeric return undefined in model when we set value bigger than maxValue or lower than minValue

[Milos]

Hi,

I add numeric to the view:

          <input ej-numerictextbox

                       [(ngModel)]="inputValue" 

                       name="inputValue"                         

                       [minValue]=1

                       [maxValue]=5000

                       width="100%" />

Model:

export class DataComponent {

    constructor() {

    }

     inputValue = 500;

}

1) Problem is that when I set value bigger then 5000 or lower then 1, numeric automatically set the min or max value on the view, but in variable in model 'inputValue' returns 'undefined'.

2) Only way to set minValue and maxValue in the view was with the [] brackets. Without brackets it does not work at all. I do not need two way binding, why I need [] brackets.

Regards,

Milos

[Karthik Ravichandran]

Hi Milos, 

 

Thanks for contacting syncfusion support. 

 

Query 1: when I set value bigger then 5000 or lower then 1, numeric automatically set the min or max value on the view, but in variable in model 'inputValue' returns 'undefined'. 

 

We have checked the reported issue in our side and while set the value greater than the maximum value, local variable also gets updated. For your reference we have attached the sample in the below link. 

 

Sample 

 

If you still facing the same issue, please revert the sample based on your application. This will help us to provide the solution at earliest. 

 

Query 2: Only way to set minValue and maxValue in the view was with the [] brackets. Without brackets it does not work at all. I do not need two way binding, why I need [] brackets. 

 

 We would like to inform you that, while set the min and max values without brackets, value will be passed as string type. But min and max values API’s are number type properties so it will not work. For that reason, we need to use [] brackets to bind the value properly. Please refer the below link 

https://angular.io/guide/template-syntax#property-binding--property- 

 

We would like to inform you that, for two- way binding we will use the syntax as mentioned in the below link. 

https://angular.io/guide/template-syntax#two-way-binding--- 

 

 

Please let us know if you need further assistance on this. 

 

Regards, 

Karthik R 

[Milos]

Hi Karthik,

I checked your example and add one more button 'Write numeric value' to the page 'numeric.component.html'.

Button just write in console current numeric value.

Issue I encountered:

1) write in input '15000' value and click any where in the page. Value in input will be removed. Try to write value in console with the button, value is null.

2)  add any value bigger  or lower then max/min value and click on button to write value. Value is usually undefined or null. 

  I assume that problem is because value is set to the input on losing focus .

Generally it work strange, sometime we get value when we add bigger or lower value than min/max sometimes not.

Also, I do not understand why we need double value binding here [(ngModel)]="inputValue"  and  [(value)] = "inputValue" ?

Regards,

Milos

[Milos]

I forgot to attache example.

Attachment: angular2seeds_fa1e0c50.zip

[Karthik Ravichandran]

Hi Milos, 

 

Thanks for your update. 

 

Query 1:  write in input '15000' value and click any where in the page. Value in input will be removed. Try to write value in console with the button, value is null. add any value bigger or lower then max/min value and click on button to write value. Value is usually undefined or null. 

 

Solution :   

Binded variable will be update when the model value has been changed. You can achieve your requirement by triggering the change event in the control focusOut. It will update the current value in the binded variable. Please refer the below code block. 

[numeric.component.html] 

<input ej-numerictextbox 

                       [(ngModel)]="inputValue"  

                       id = "NumericTextbox" 

                       name="inputValue"                          

                       [minValue]= 20 

                       [maxValue]= 50 

                       width="100%" (ejchange) = "onValueChange($event)" (focusOut) = "onFocusedOut($event)" /> 

[numeric.component.ts] 

   onFocusedOut(event: any){ 

     var obj = $("#NumericTextbox").ejNumericTextbox("instance"); 

     obj._trigger("change", { value: obj.model.value, isInteraction: true }); 

    } 

 

 

Query 2: Also, I do not understand why we need double value binding here [(ngModel)]="inputValue"  and  [(value)] = "inputValue" ? 

Solution: 

You can use any one from [(ngModel)] and [(value)]. In the previous sample we have used [(value)] is just to let you know we have already having the value property with two way binding support. No need to use both methods in your application. 

 

For your convenience, we have modified the sample in the below link. 

Sample 

Please let us know if you need further assistance on this. 

Regards, 

Karthik R 

[Milos]

Hi Karthik,

Thank for your response, it solved my problem.

Regards,

Milos

[Karthik Ravichandran]

Hi Milos, 

 

Most welcome. We are happy to hear that reported problem has been resolved in your side. Please let us know if you need further assistance.  

 

Regards, 

Karthik R