Question 407359 in Html Question posted in
Some basic documentation can be found here.

Html number input handling in blazor

I am facing issue in handling max with manual input. My implimentation works like , when input value is already equal to max like 13 equal to 13 and i enter more value it becomes i.e 136. i trying its convert to 13 but its work only for 2 digits lenght like 20 converted into 13 but after it becomes 134 or 137

`

                     <td>
                <input     min="0.01" class="quantityInput"
                                type="number" step="0.01" 
                             value="@item.Quantity"   @oninput="e => UpdateQuantity(item,e)"
                max="@item.MaxQuantity" />

                     </td>

@code{
  private void UpdateQuantity(EditableSaleItemViewModel item, ChangeEventArgs e)
   {
       var input = e.Value?.ToString();
       if (double.TryParse(input, out double newQuantity))
       {
           if (newQuantity < 0)
           {
               newQuantity = 0; // Ensure it's not negative
           }
           else if (newQuantity > item.MaxQuantity)
           {
               newQuantity = item.MaxQuantity;  
           }
        
           item.Quantity = newQuantity;
           e.Value = item.Quantity;
           item.TotalPrice = Math.Round(item.Quantity * item.UnitPrice, 2);
        
       }
       else
       {
           item.Quantity = 0;  
           item.TotalPrice = 0;
       }

       totalAmount = Math.Round(editableSaleItems.Sum(i => i.TotalPrice), 2);
       StateHasChanged();
   }}
`
Tags:

2

Answers


  1. 0

    I can’t create a Minimal Reproducible Example from your code, so here’s a demo of how you could implement your input using binding.

    <input class="form-control"
       type="number"
       step="0.01"
       @bind:get="_quantity"
       @bind:set="this.SetQuantity"
       @bind:event="oninput" />


@code {
    private decimal _quantity;
    private decimal _maxQuantity = 20;

    private void SetQuantity(decimal value)
    {
        _quantity = value;

        if (value > _maxQuantity)
            _quantity = _maxQuantity;

        if (value < 0)
            _quantity = 0;

            //Add other logic you want
    }
}
    Login or Signup to reply.
  2. 0

    I had a similar problem by creating a numerical combobox. the problem is in blazor there are two different way to manage onchange, but they will be mixed easily and cause confiusion. this link helped me to undrestand the problem
    https://docs.telerik.com/blazor-ui/knowledge-base/value-changed-validation-model
    my suggestion is that change @oninput="e => UpdateQuantity(item,e)" to ValueChanged="CustomerHasChangedEvent" and add ValueExpression="@((@item.Quantity)=> )". when you use @oninput you need @bind-value as well…. your tag should seems something like this

     <input min="0.01" class="quantityInput"
        type="number" step="0.01" 
        value="item.Quantity"
        ValueChanged="UpdateQuantity"
        ValueExpression="@(()=>item.Quantity)"
        max="@item.MaxQuantity" />

    so directly you can work with numbers instead of converting string-number.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search