blazor 动态表单添加没有模型类的验证

Question

im learning blazor and wanted to build some small dynamic form generator i known that there is already something like VxFormGenerator but wanted to learn by myself a bit - at least for simple forms purposes.

so i have it like this:

DynamicFormsComponent:

<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       
}

so the usage would be

<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));

}

and the question is:

how with this approach i can use form validation ? i have no clasic'model' so probably would need something like add 'list of validators ' to my DynamicFormField class

and somehow force DataAnnotationsValidator to use this list ? is it possible withoud clasic 'model' and 'data annotations attributes' on it ?

thanks and regards

Answer 1

The only way to validate form without a model is to use the Blazorise validation system. https://blazorise.com/docs/components/validation .

PS. I'm a Blazorise creator.