Question

所以我试图通过使用EditForm在blazor中触发模型验证

由于某些原因，如果使用InputText似乎不会调用oninput事件，那么当使用简单的input元素时，它将按预期工作。

我错过了什么吗？

这是我正在使用的示例html

        <EditForm Model="@Model" OnValidSubmit="@OnValidSubmit" id="authorize">
        <h1 class="mb-3">
            <span class="d-block">Authorize</span>
        </h1>
        <DataAnnotationsValidator />
        <div class="form-group">
            <label class="sr-only" for="AuthorizeUsername">Username</label>
            <div class="input-group mb-2">
                <div class="input-group-prepend">
                    <div class="input-group-text"><i class="fas fa-user"></i></div>
                </div>
                <InputText type="text" class="form-control" id="AuthorizeUsername" placeholder="Username" @bind-value="@Model.Username" @bind-value:event="oninput" />
            </div>
        </div>
        <div class="form-group">
            <label class="sr-only" for="AuthorizePassword">Password</label>
            <div class="input-group mb-2">
                <div class="input-group-prepend">
                    <div class="input-group-text"><i class="fas fa-asterisk"></i></div>
                </div>
                <InputText type="password" class="form-control" id="AuthorizePassword" placeholder="Password" @bind-value="@Model.Password" @bind-value:event="oninput" />
            </div>
        </div>
        <div class="form-group">
            <ValidationSummary />
            <button type="submit" class="btn btn-outline-primary"><i class="fas fa-sign-in-alt mr-1"></i> Login</button>
        </div>
    </EditForm>

Answer 1

如果您需要进行验证，请参见以下答案：

How to make an EditForm Input that binds using oninput rather than onchange

TLDR：Blazor Input组件不支持此功能。您需要扩展InputBase来滚动自己的对象，新组件的Razor标记会将输入事件绑定直接放在输入元素上。

如果这是一个即用型的选项，那就很好了，但是至少有一种方法并不可怕。但是请注意，对于更复杂的输入类型，这很快会变得更加复杂。例如，如果要使用自己的InputBase<DateTime>派生类，则需要准备好正确处理绑定事件中的DateTime格式。

您自己的InputText版本的标记（扩展名为MyInputTextCode的{{1}}看起来应该像这样：

InputBase<string>

其中@inherits MyInputTextCode; <input type="text" id="@Id" class="@Class" @bind-value="CurrentValueAsString" @bind-value:event="oninput" />是您的MyInputTextCode实现的类名

用法基本上与InputBase<string>相同，但是您将使用.razor标记的文件名（不带扩展名）而不是InputText。

Answer 2

由于您绑定到html属性“值”，因此它可用于简单的输入。

InputText是C＃类。您需要绑定的属性名称为Value，其首字母为V。

将所有@bind-value项更改为@bind-Value，它应该可以工作。

Blazor绑定值：输入事件

2 个答案: