Crea un formulario a partir de una lista de definiciones de campos en lugar de escribir marcado: texto, correo, contraseña, número, fecha, lista, radio, casilla e interruptor.
Por qué ayuda
- Formularios a partir de definiciones
- Tipos de campo comunes
- Validación incluida
Dónde encaja
- Pantallas de administración
- Formularios dinámicos
- Prototipos
Ejemplo
<FormBuilder Fields="_fields" Values="_values" OnSubmit="Submitted" SubmitText="Register" />
<pre class="code-block" tabindex="0"><code>@_result</code></pre>
@code {
private string _result = "Submit the form to see the values.";
private readonly Dictionary<string, object?> _values = new() { ["newsletter"] = true };
private readonly FormField[] _fields =
[
new("name", "Full name", Required: true, Placeholder: "Ada Lovelace"),
new("email", "Email", FormFieldKind.Email, Required: true, Help: "We never share it."),
new("age", "Age", FormFieldKind.Number, Min: 18, Max: 120),
new("birth", "Date of birth", FormFieldKind.Date),
new("country", "Country", FormFieldKind.Select, Options: ["Bulgaria", "Germany", "Norway"], Placeholder: "Choose…", Required: true),
new("plan", "Plan", FormFieldKind.Radio, Options: ["Free", "Team", "Enterprise"]),
new("notes", "Notes", FormFieldKind.TextArea, Lines: 3),
new("newsletter", "Send me the newsletter", FormFieldKind.Switch),
new("terms", "I accept the terms", FormFieldKind.Checkbox, Required: true)
];
private void Submitted(IReadOnlyDictionary<string, object?> values) =>
_result = string.Join("\n", values.Select(pair => $"{pair.Key} = {pair.Value}"));
}Un breve fragmento. Añade @using RayCraft.Blazor.Components a tu página y usa un modo de renderizado interactivo.
Incluido en RayCraft Free. Hay ejemplos que funcionan en el repositorio de GitHub (MIT); contiene código de ejemplo y demostración, no el código de la biblioteca.