Bauen Sie ein Formular aus einer Liste von Felddefinitionen statt Markup zu schreiben: Text, E-Mail, Passwort, Zahl, Datum, Auswahl, Radio, Kontrollkästchen und Schalter.
Warum es hilft
- Formulare aus Definitionen
- Gängige Feldtypen
- Validierung inklusive
Wo es passt
- Admin-Bildschirme
- Dynamische Formulare
- Prototypen
Beispiel
<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}"));
}Ein kurzes Fragment. Fügen Sie @using RayCraft.Blazor.Components zu Ihrer Seite hinzu und nutzen Sie einen interaktiven Render-Modus.
In RayCraft Free enthalten. Funktionierende Beispiele finden Sie im GitHub-Repository (MIT); es enthält Beispiel- und Democode, nicht den Code der Bibliothek.