Blazor HTML 数字输入不强制实施最小最大约束

Question

我正试图限制用户可以在HTML数字输入中输入的最大数字值。如果我只是使用箭头来更改数字，这很好，但如果用户手动输入数字，则不会强制执行。

是否有一个内置的解决方案，无需javascript/JQuery或表单提交？你知道的Blazor组件，可能会有帮助吗？谢谢

@foreach(var component in Components)
{
<tr>
<td>
<input type="number" min = "1" max="Assembly.Component.Quantity" @bind-value="Component.Quantity"/>
</td>
</tr>
}

Answer 1

如果控件不存在，则构建它。

这里有一个基于InputNumber的：

1. 约束一个int值
2. 不允许您输入约束之外的值
3. 如果尝试并添加验证消息，则添加验证消息

@using System.Diagnostics.CodeAnalysis
@using System.Globalization
@inherits InputNumber<int?>
<input type="number" class="@this.CssClass" @attributes=this.AdditionalAttributes value=@this.CurrentValueAsString @oninput=OnValueChanged />
@code {
[Parameter] public int Min { get; set; } = int.MinValue;
[Parameter] public int Max { get; set; } = int.MaxValue;
private async Task OnValueChanged(ChangeEventArgs e)
{
// capture the current state
var currentValue = this.CurrentValue;
var resetToCurrent = false;
// Check if we need to reset the display value
if (BindConverter.TryConvertTo<int?>(e.Value?.ToString(), CultureInfo.InvariantCulture, out int? value))
resetToCurrent = value < this.Min || value > this.Max;
// Sets off the internal InputBase update process        
this.CurrentValueAsString = e.Value?.ToString();
// Bit of a hoop jumping exercise to get the display value back to what it was.
// Currently the actual UI Dom has it at the new (invalid) value
// whilst the Render DOM has it at it's last value.
// If we set it to it's old value the Renderer thinks it hasn't changed and doesn't do anything!
if (resetToCurrent)
{
this.CurrentValue = value;
StateHasChanged();
// Called to yield and let the Renderer update the component before we reset it to the old value
await Task.Delay(1);
this.CurrentValue = currentValue;
StateHasChanged();
}
}
// Normal override to covert the string value to it's correct type and add validation message if we need to.
protected override bool TryParseValueFromString(string? value, [MaybeNullWhen(false)] out int? result, [NotNullWhen(false)] out string? validationErrorMessage)
{
validationErrorMessage = null;
if (BindConverter.TryConvertTo<int?>(value, CultureInfo.InvariantCulture, out result))
{
if (result < this.Min)
validationErrorMessage = $"{DisplayName ?? FieldIdentifier.FieldName} must be greater than {this.Min}";
if (result > this.Max)
validationErrorMessage = $"{DisplayName ?? FieldIdentifier.FieldName} must be less than {this.Max}";
}
if (validationErrorMessage is not null)
result = CurrentValue;
return validationErrorMessage is null;
}
}

我的测试页面：

@page "/"
<PageTitle>Index</PageTitle>
<h1>Hello, world!</h1>
<EditForm Model=this.model>
<MyInputNumber @bind-Value=this.model.Value Min=1 Max=10 placeholder="Must be 1-10" />
<ValidationSummary />
</EditForm>
<div class="m-2 p-2 bg-dark text-white">
Value : @this.model.Value
</div>
@code {
private ModelData model = new ModelData();
public class ModelData
{
public int? Value { get; set; }
}
}

Answer 2

只需像这样更改绑定getter/setter。

例如，我想强制最小值为10，最大值为500:

private int? overrideWidth;
public int? OverrideWidth {
get => overrideWidth;
set => overrideWidth = value < 10 ? 10 : value > 500 ? 500 : value;
}

我的输入：

<input type="number" @bind="SomeModel.OverrideWidth" @bind:event="oninput" class="form-control">