1

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

3
  • I think you're going to need to write your own validator as well. The DataAnnotationsValidator is a very basic validator. You can check out some of the other validators out there, but I'm not sure you'll find something dynamic! I've written my own. Commented Apr 8, 2022 at 14:19
  • can you post some simple example that you have? :) Commented Apr 9, 2022 at 12:01
  • 1
    There's an article on Code Project -see codeproject.com/Articles/5297302/A-Blazor-Validation-Control Commented Apr 9, 2022 at 15:08

1 Answer 1

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.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.