Last active
October 27, 2020 09:43
-
-
Save vertonghenb/235b53008ce0897e0920e3449ab122e9 to your computer and use it in GitHub Desktop.
[Blazor.Fast] Example of how to use the components with validation and databinding
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@using System.ComponentModel.DataAnnotations | |
<EditForm Model="model" OnValidSubmit="Submit"> | |
<DataAnnotationsValidator /> | |
<ValidationSummary /> | |
<p> | |
<TextField @bind-Value="model.Firstname">Firstname*</TextField> | |
</p> | |
<p> | |
<TextField @bind-Value="model.Lastname">Lastname*</TextField> | |
</p> | |
<p> | |
<TextField type="tel" @bind-Value="model.Telephone">Phone</TextField> | |
</p> | |
<p> | |
<TextField type="email" @bind-Value="model.Email">Email Address*</TextField> | |
</p> | |
<p> | |
<DateField @bind-Value="model.Birthday">Date of birth</DateField> | |
</p> | |
<p> | |
<NumberField @bind-Value="model.AmountOfChildren">Amount of kids</NumberField> | |
</p> | |
<Button type="submit">Submit</Button> | |
</EditForm> | |
<Dialog hidden=@(!isShowingDialog ? "true" : null)> | |
<div style="padding: 0 10px 10px; color: var(--neutral-foreground-rest)"> | |
<h2>You submitted the form with the following contents:</h2> | |
<p>Firstname: @model.Firstname</p> | |
<p>Lastname: @model.Lastname</p> | |
<p>Telephone: @model.Telephone</p> | |
<p>Email: @model.Email</p> | |
<p>Date of birth: @model.Birthday</p> | |
<p>Kids: @model.AmountOfChildren</p> | |
<Button @onclick="CloseDialog">Close</Button> | |
</div> | |
</Dialog> | |
@code{ | |
private bool isShowingDialog = false; | |
private EditModel model = new EditModel(); | |
public class EditModel | |
{ | |
[Required] | |
[StringLength(10, ErrorMessage = "Firstname is too long.")] | |
public string Firstname { get; set; } | |
[Required] | |
[StringLength(10, ErrorMessage = "Lastname is too long.")] | |
public string Lastname { get; set; } | |
public string Telephone { get; set; } | |
[Required] | |
[EmailAddress] | |
public string Email { get; set; } | |
public DateTime Birthday { get; set; } | |
public int AmountOfChildren { get; set; } | |
} | |
private void Submit() => isShowingDialog = true; | |
private void CloseDialog() => isShowingDialog = false; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment