Blazor InputNumber 清空时将值设置为 0

Question

当我通过按删除按钮清除InputNumber控件中的值，然后按tab按钮时，该值保持不变并且没有更新。

我绑定InputNumber控件的属性如下

[Required]
[RegularExpression(@"^\d+.\d{0,6}$", ErrorMessage = "The Price field cannot have more than 2 decimal places.")]
public decimal Price {get;set;}

我怎样才能使当我按下删除按钮时，Price 更新为 0？

我想让这发生的原因是当前的行为导致了一些问题。 这是一个例子：

1. 在Quantity属性的setter中，当Quantity被设置时，如果Quantity和Price不为0则设置Unit Price为Price除以Quantity

2. 将Price 设置为 100

3. 按删除按钮删除Price。 错误消息尖叫"The Price field is required."，但Price 的值仍为100

4. 将 Quantity 设置为 10。Unit Price 被错误地计算为 10。尽管在 Price 的 <InputNumber> 控件上显示的是空而不是 100。

我试过了：

1. 在<InputNumber> 控件上使用@OnEmptied => 也不更新Price 的值

2. 将decimal 变成decimal? 这没有多大帮助，因为我仍然想验证是否输入了Price

任何建议将不胜感激！

完整代码如下（index.razor）：

@page "/"
@using System.ComponentModel.DataAnnotations;

<EditForm Model="item">
    <DataAnnotationsValidator></DataAnnotationsValidator>
    <div>
        <label>Quantity:</label>
        <InputNumber @bind-Value="item.Quantity"></InputNumber>
        <ValidationMessage For="@(()=>item.Quantity)"></ValidationMessage>
    </div>
    <div>
        <label>Unit Price:</label>
        <InputNumber @bind-Value="item.UnitPrice"></InputNumber>
        <ValidationMessage For="@(()=>item.UnitPrice)"></ValidationMessage>
    </div>
    <div>
        <label>Price:</label>
        <InputNumber @bind-Value="item.Price"></InputNumber>
        <ValidationMessage For="@(()=>item.Price)"></ValidationMessage>
    </div>

</EditForm>

@code {
    private Item item = new Item()
    {
        Price = 0,
        Quantity = 0,
        UnitPrice = 0
    };

    public class Item
    {
        private decimal _quantity;
        [Required]
        [RegularExpression(@"^\d+.\d{0,6}$", ErrorMessage = "The Qauntity field cannot have more than 6 decimal places.")]
        public decimal Quantity
        {
            get => _quantity;
            set
            {
                _quantity = Math.Abs(value);

                if (_unitPrice == 0 && _quantity != 0 && _price != 0)
                {
                    _unitPrice = decimal.Round(_price / _quantity, 6);
                }

                if (_quantity != 0 && _unitPrice != 0)
                {
                    _price = decimal.Round(_quantity * _unitPrice, 2);
                }
            }
        }

        private decimal _unitPrice;
        [Required]
        [RegularExpression(@"^\d+.\d{0,6}$", ErrorMessage = "The Unit Price field cannot have more than 6 decimal places.")]
        public decimal UnitPrice
        {
            get => _unitPrice;
            set
            {
                _unitPrice = Math.Abs(value);

                if (_quantity == 0 && _unitPrice != 0 && _price != 0)
                {
                    _quantity = decimal.Round(_price / _unitPrice, 6);
                }

                if (_quantity != 0 && _unitPrice != 0)
                {
                    _price = decimal.Round(_quantity * _unitPrice, 2);
                }
            }
        }

        private decimal _price;
        [Required]
        [RegularExpression(@"^\d+.\d{0,6}$", ErrorMessage = "The Price field cannot have more than 2 decimal places.")]
        public decimal Price
        {
            get => _price;
            set
            {
                _price = Math.Abs(value);

                if (_quantity == 0 && _price != 0 && _unitPrice != 0)
                {
                    _quantity = decimal.Round(_price / _unitPrice, 6);
                }

                if (_unitPrice == 0 && _price != 0 && _quantity != 0)
                {
                    _unitPrice = decimal.Round(_price / _quantity, 6);
                }
            }
        }
    }
}

Answer 1

首先，您的正则表达式 (^\d+.\d{0,6}$) 与您描述的所需行为不匹配。分解：

• ^\d+: 以一个或多个十进制数字开头_{到目前为止一切顺利}
• .: 任意角色之一_{危险！您的输入现在至少需要 2 个字符！}
• \d{0,6}$: 末尾有 0-6 个十进制字符 _ok

所以10、0. 和0d 将全部匹配，但0 不匹配。由于您使用的是数字输入，因此您不必担心其中一些问题，但您可能希望能够插入单个数字。将您的正则表达式更改为 ^\d+(?:\.\d{0,6})?$:

• ^\d+：以一个或多个十进制数字开头_{还是不错的}
• (?: ... )?$：可选组以结尾（所以小数是可选的）_good.
• 和分组的\.\d{0,6}（\.\d{0,2} 表示价格）：一个字面“.”后跟 0-6 个十进制字符。 _好！

至于在删除内容后将输入设置为'0'，这可以通过JavaScript轻松完成：

document.querySelectorAll('form input[type="number"]')
  .forEach(input => {
    // input or keyup events will work
    input.addEventListener('input', ({ target }) => input.value = target.value || '0')
  })