Blazor InputNumber在清空时将值设置为0

Question

当我通过按下删除按钮然后按下选项卡按钮清除InputNumber控件中的值时，该值保持不变并且不会更新。

绑定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属性的设置器中，当设置Quantity时，如果Quantity和Price不为0，则将Unit Price设置为Price除以Quantity

2. 将Price设置为100

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

4. 将Quantity设置为10。CCD_ 16被错误地计算为10。尽管CCD_ 18的CCD_ 17控件上显示的是空而不是100。

我试过：

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

2. 将decimal转换为decimal?这没有多大帮助，因为我仍然想验证Price是否已进入

如有任何建议，我们将不胜感激！

完整代码如下(索引.剃刀(：

@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}$:_{ok结束时有0-6个十进制字符}

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

• ^d+：以一个或多个十进制数字开始_仍然有效
• (?: ... )?$：可选组以结束(因此小数是可选的(_good
• 并且分组的CCD_ 36(价格为CCD_；CCD_ 38"；后面跟着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')
})