0

我正在尝试为我的应用程序设置流畅的验证。验证适用于父组件。它将消息显示为离开字段。但是,它与子组件的工作方式不同。不会出现验证消息。

验证消息不会出现在子组件中。

它仅在我执行 EditContext.Validate 方法时才有效。

当我执行 EditContext.Validate 方法时,验证工作。

任何想法如何解决这一问题?谢谢你。

楷模:

namespace Application.Models
{
    public class Company
    {
        ...
        public string Name { get; set; }

        public int headquartersId { get; set; }
        public Address Headquarters { get; set; }
        ...
    }
    public class Address
    {
        ...
        public string Street { get; set; }
        ...
    }
}

验证器:

using Application.Models
using FluentValidation

namespace Application.Validators
{
   public class CompanyValidator: AbstractValidator<Company>
   {
      public CompanyValidator()
      {
         RuleFor(fields => fields.Name)
         .MinimumLength(5)
         .WithMessage("---");

         RuleFor(field => field.Headquarters).SetValidator(new AddressValidator());
      }
   }
   public class AddressValidator: AbstractValidator<Address>
   {
      public AddressValidator()
      {
          RuleFor(fields => fields.Street)
          .MinimumLength(5)
          .WithMessage("---");
      }
   }
}

父组件:

@using Application.Models.Cards.Customers
@using Application.Models
@using FluentValidation

<EditForm EditContext="editContext" OnSubmit="Submit">

    <FluentValidationValidator />

    <div class="form-group">
        <label for="fname">Business Entity Name</label>
        <InputText name="fname" @bind-Value="Customer.Name" class="form-control"></InputText>
        <ValidationMessage For="@(() => Customer.Name)" />
    </div>
    <div class="form-group">
        <label for="fname">Business Entity Code</label>
        <InputText name="fname" @bind-Value="Customer.Code" class="form-control"></InputText>
        <ValidationMessage For="@(() => Customer.Code)"></ValidationMessage>
    </div>
    <div class="form-group">
        <label for="fname">Business Entity VAT</label>
        <InputText name="fname" @bind-Value="Customer.VAT" class="form-control"></InputText>
        <ValidationMessage For="@(() => Customer.VAT)"></ValidationMessage>
    </div>
    **<AddressComponent Address="Customer.Headquarters" SetCurrentAddress="GetAddress"/>**

    <button type="submit" class="btn btn-primary">Save</button>

</EditForm>

@code {
    [Parameter]
    public Company Customer { get; set; }

    #nullable enable
    private EditContext? editContext;

    protected override Task OnInitializedAsync()
    {
        editContext = new EditContext(Customer);
        return base.OnInitializedAsync();
    }

    private void GetAddress(Address address)
    {
        Customer.Headquarters = address;
    }

    private void Submit()
    {
        editContext?.Validate();
    }
}

地址组件:

@using Application.Models

<div class="row">
    <div class="form-group col-3">
        <label for="house">House</label>
        <input type="number" name="house" @bind-Value="Address.House" @bind-Value:event="oninput"  class="form-control" />
        <ValidationMessage For="@(() => Address.House)" />
    </div>
    <div class="form-group col-9">
        <label for="street">Street</label>
        <input type="text" name="street" @bind="Address.Street" @bind:event ="oninput" @onkeyup="OnAddressChange" class="form-control" />
        <ValidationMessage For="@(() => Address.Street)" />
    </div>
</div>
<div class="row">
    <div class="form-group col-3">
        <label for="postCode">Post Code</label>
        <input type="text" name="postCode" @bind="Address.PostCode" @bind:event="oninput" @onkeyup="OnAddressChange" class="form-control" />
        <ValidationMessage For="@(() => Address.PostCode)" />
    </div>
    <div class="form-group col-9">
        <label for="county">County</label>
        <input type="text" name="county" @bind="@Address.County" @bind:event="oninput" @onkeyup="OnAddressChange" class="form-control" />
        <ValidationMessage For="@(() => Address.County)" />
    </div>
</div>
<div class="row">
    <div class="form-group col-12">
        <label for="country">Country</label>
        <input type="text" name="country" @bind="Address.Country" @bind:event="oninput" @onkeyup="OnAddressChange" class="form-control" />
        <ValidationMessage For="@(() => Address.Country)" />
    </div>
</div>


@code {

    [Parameter]
    public Address Address { get; set; }

    [Parameter]
    public EventCallback<Address> SetCurrentAddress { get; set; }

    private async Task OnAddressChange()
    {
        await SetCurrentAddress.InvokeAsync(Address);
    }
}

4

1 回答 1

0

不确定这是否会解决您的问题,但它对我有用。我以不同的方式使用 FluentValidationValidator:

我的编辑表单看起来像:

<EditForm Model="@Customer" OnSubmit="Submit">
...

"@Customer"模型的实例在哪里。然后我用一个参考设置我的验证器:

<FluentValidationValidator @ref="fluentValidationValidator" />

并定义一个变量来处理它:

private FluentValidationValidator fluentValidationValidator;

然后当我想验证时:

var validationResults = fluentValidationValidator.Validate(opts => opts.IncludeAllRuleSets());
if (!validationResults) return;
// model is valid, save, etc.

克里斯在这里列出了一些幕后的东西:https ://chrissinty.com/using-fluentvalidation-for-forms-validation-in-razor-components/

于 2022-02-08T17:46:59.393 回答