blazor 動態表單添加沒有模型類的驗證

Question

我正在學習 blazor 並想構建一些小型動態表單生成器，我知道已經有類似 VxFormGenerator 的東西，但想自己學習一點——至少對於簡單的表單目的。

所以我有這樣的：

動態表單組件：

<EditForm Model = "@Params" OnValidSubmit="OnValidSubmit">

<DataAnnotationsValidator/>

@if(Params != null ) @foreach (var field in Params.FormFields)
{
   <div class="mb-3">
     <label for= "@field.Id">@field.Label :</label>


    @switch (field.Type)
            {
                case FormFieldType.Text:
                {
                        <InputText id="@field.Id"  @bind-Value="@field.StrValue" placeholder="@field.PlaceHolder" class="form-control"></InputText>
                        break;
                }
                case FormFieldType.Number:
                {
                        <InputNumber id="@field.Id" @bind-Value="@field.IntValue" placeholder="@field.PlaceHolder"  class="form-control"> ></InputNumber>
                        break;
                    }
                 case FormFieldType.Date:
                {
                        <InputDate id="@field.Id" @bind-Value="@field.DateValue" placeholder="@field.PlaceHolder" class="form-control"></InputDate>
                        break;
                    }
                default:
                    {
                        break;
                    }
            }
   </div>
}  
<ValidationSummary></ValidationSummary>  
<button type="submit" class="btn btn-primary">@Params?.SendButtonText</button>

public partial class DynamicFormComponent:ComponentBase
{
    [Parameter]
    public  DynamicFormParams Params { get; set; } = new DynamicFormParams();

    [Parameter]
    public EventCallback<DynamicFormParams> OnValidSubmitCallback { get; set; }
    void OnValidSubmit()
    {
        Console.WriteLine("onValidSubmit");
        if (OnValidSubmitCallback.HasDelegate )    OnValidSubmitCallback.InvokeAsync(Params);
        //NavigationManager.navigateto.....
    }
}

public class DynamicFormParams
{
    public List<DynamicFormField> FormFields { get; set; } = new List<DynamicFormField>();
    public string FormTitle { get; set; } = string.Empty;
    public string SendButtonText { get; set; } = "Send";
}

public class DynamicFormField
{
    public string? Label { get; set; }
    public string Id { get; set; } = Guid.NewGuid().ToString();
    public string PlaceHolder { get; set; } = string.Empty;
    public FormFieldType? Type { get; set; }
    public string? StrValue { get; set; }
    public int? IntValue { get; set; }
    public DateTime? DateValue { get; set; }

}

public enum FormFieldType
{
    Text,
    Number,
    Date       
}

所以用法是

<DynamicFormComponent Params="@p" OnValidSubmitCallback=@onChildFormSubmit ></DynamicFormComponent>

DynamicFormParams p = new DynamicFormParams()
    {
        FormTitle = "test form Title",
        SendButtonText = "Wyślij",
        FormFields = new List<DynamicFormField>()
            {
                new DynamicFormField()
                {
                     Label="testLabelStr",
                     Id="anyid-notGuId",
                     StrValue="a",
                     PlaceHolder="asdadsad",
                     Type=FormFieldType.Text
                },
                new DynamicFormField()
                {
                     Label="testLabelInt",
                     Type=FormFieldType.Number,
                      PlaceHolder="enter nr"
                },
                new DynamicFormField()
                {
                     Label="testLabelDate",
                     Type=FormFieldType.Date,
                     DateValue=DateTime.Parse("2021-04-01")
                }
            }
    };

private void onChildFormSubmit(DynamicFormParams pp)
{
    Console.WriteLine("from local variable");
    Console.WriteLine(JsonSerializer.Serialize(p));
    Console.WriteLine("from event arg");
    Console.WriteLine(JsonSerializer.Serialize(pp));

}

問題是：

我如何通過這種方法使用表單驗證？ 我沒有經典的“模型”，所以可能需要將“驗證器列表”添加到我的 DynamicFormField 類中

並以某種方式強制 DataAnnotationsValidator 使用此列表？ 沒有經典的“模型”和“數據注釋屬性”可以嗎？

謝謝並恭祝安康

Answer 1

在沒有模型的情況下驗證表單的唯一方法是使用 Blazorise 驗證系統。 https://blazorise.com/docs/components/validation 。

PS。 我是 Blazorise 的創造者。