Disable/Enable Blazor 中的按钮 - 取决于表单中的内容

Question

所以我在 ASP.NET Core 中创建这个小项目，我有一个 WEB API，已经写好了，但我正在努力使用 Blazor 中的前端来使用它 API . POST，GET HTTP 请求效果很好。我有一个剃须刀页面，我在其中放入了一些数据（姓名、姓氏等），然后单击“发送”，数据被 POSTed 到 API。

关于该表格有一些验证：名称 - 至少 5 个字符 FamilyName – 至少 5 个字符地址 – 至少 10 个字符 EmailAdress – 必须是有效的电子邮件年龄 - 必须在 20 到 60 岁之间

这一切都是在这里用 DataAnnotations 完成的：

using System.ComponentModel.DataAnnotations;

namespace Blazor.Data
{
    public class Applicant
    {
        public int Id { get; set; }

        [MinLength(5, ErrorMessage ="Name must contain atleast 5 characters.")]
        public string Name { get; set; }

        [MinLength(5, ErrorMessage ="Family Name must contain atleast 5 characters.")]
        public string FamilyName { get; set; }

        [MinLength(10,ErrorMessage ="Address must contain atleast 10 characters.")]
        public string Address { get; set; }

        public string CountryOfOrigin { get; set; }

        [EmailAddress(ErrorMessage ="E-Mail adress is not valid.")]
        public string EmailAddress { get; set; }

        [Range(20,60,ErrorMessage ="Age must be between 20 and 60.")]
        public int Age { get; set; }

        public bool Hired { get; set; }
    }
}

在 Razor 页面中，我有一个表格要填写，然后发送到 API，如下所示：

@page "/postapplicant"
@using Blazor.Data
@using System.Web
@inherits ApplicantCreateBase

<h1>Create an Applicant</h1>

<p>This component demonstrates posting a data to a Web API.</p>

<EditForm Model="@Applicant" OnValidSubmit="@SendValid">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <hr />
    <div class="form-group row">
        <label for="Name" class="col-sm-2 col-form-label">
            First Name
        </label>
        <div class="col-sm-10">
            <InputText id="Name" class="form-control" placeholder="First Name"
                       @bind-Value="Applicant.Name" />
            <ValidationMessage For="@(() =>Applicant.Name)" />
        </div>
    </div>
    <div class="form-group row">
        <label for="FamilyName" class="col-sm-2 col-form-label">
            Family Name
        </label>
        <div class="col-sm-10">
            <InputText id="FamilyName" class="form-control" placeholder="Family Name"
                       @bind-Value="Applicant.FamilyName" />
            <ValidationMessage For="@(() =>Applicant.FamilyName)" />
        </div>
    </div>
    <div class="form-group row">
        <label for="Address" class="col-sm-2 col-form-label">
            Address
        </label>
        <div class="col-sm-10">
            <InputText id="Address" class="form-control" placeholder="Address"
                       @bind-Value="Applicant.Address" />
            <ValidationMessage For="@(() =>Applicant.Address)" />
        </div>
    </div>
    <div class="form-group row">
        <label for="CountryOfOrigin" class="col-sm-2 col-form-label">
            Country
        </label>
        <div class="col-sm-10">
            <InputSelect id="CountryOfOrigin" class="form-group" placeholder="Country Of Origin"
                         @bind-Value="Applicant.CountryOfOrigin">
                @foreach (var item in Countries)
                {
                    <option>@item.Title</option>
                }
            </InputSelect>
        </div>
    </div>
    <div class="form-group row">
        <label for="EMailAddress" class="col-sm-2 col-form-label">
            E-Mail Address
        </label>
        <div class="col-sm-10">
            <InputText id="EMailAddress" class="form-control" placeholder="E-Mail Address"
                       @bind-Value="Applicant.EmailAddress" />
            <ValidationMessage For="@(() =>Applicant.EmailAddress)" />
        </div>
    </div>
    <div class="form-group row">
        <label for="Age" class="col-sm-2 col-form-label">
            Age
        </label>
        <div class="col-sm-10">
            <InputNumber id="Age" class="form-control" placeholder="Age"
                         @bind-Value="Applicant.Age" />
            <ValidationMessage For="@(() =>Applicant.Age)" />
        </div>
    </div>
    <div class="form-group row">
        <label for="Hired" class="col-sm-2 col-form-label">
            Hired
        </label>
        <div class="col-md-1">
            <InputCheckbox id="Hired" class="form-control" placeholder="Hired"
                           @bind-Value="Applicant.Hired" />
        </div>
    </div>
    <button class="btn btn-primary"  type="submit">Send</button>
    <button class="btn btn-secondary" type="button" @onclick="Reset_Click">Reset</button>

</EditForm>
<Confirm ConfirmationChanged="ConfirmReset_Click" @ref="ResetConfirmation"></Confirm>

一切正常，按预期运行，但我希望仅当整个表单根据我上面列出的规则有效时才启用发送按钮。我知道你可以在按钮中使用这个禁用属性但我不知道如何正确实现它。在 C# / .net 核心中似乎一团糟。从头开始编写 Web api 更容易。不胜感激，谢谢！

Answer 1

您可以访问 EditForm 的上下文：

  <button class="btn btn-primary" type="submit" disabled="@(!context.Validate())">Send</button>

Answer 2

为了避免在表单尚未修改时（即最初）显示验证错误消息，您可以使用：

Disabled="@(!context.IsModified() || !context.Validate())"

Disable/Enable Blazor 中的按钮 - 取决于表单中的内容

Disable/Enable Button in Blazor - Depending on what is in the form

c#

frontend

button

blazor

webapi