Custom renderer

Renderers are pluggable. The rating field below is drawn by a custom star-rating component registered against the key "rating" — the engine, validation and state are unchanged.

Live form

View source

@page "/custom-renderer"

<BormView Definition="_schema" Data="_data" OnValidSubmit="HandleSubmit" SubmitText="Send feedback" />

@code {
    private BormDefinition _schema = default!;
    private readonly Dictionary<string, object?> _data = new();

    protected override void OnInitialized()
    {
        _schema = BormBuilder.Create()
            .Title("Leave feedback")
            .Field("rating", BormFieldType.Custom, f => f
                .Label("How would you rate us?")
                .CustomRenderer("rating")
                .Attr("max", 5)
                .Must(v => v is int i && i >= 1, "Please pick a rating."))
            .Text("comment", f => f.AsTextArea(3).Label("Comments").Placeholder("Optional"))
            .Build();
    }

    private void HandleSubmit(BormState state)
    {
        var json = System.Text.Json.JsonSerializer.Serialize(_data,
            new System.Text.Json.JsonSerializerOptions { WriteIndented = true });
    }
}

// Renderers are registered in Program.cs against a key:
//   builder.Services.AddBorm(registry =>
//       registry.RegisterCustom("rating", typeof(StarRatingInput)));

Edit this page on GitHub