Skip to content

Instantly share code, notes, and snippets.

@vertonghenb
Last active October 27, 2020 09:43
Show Gist options
  • Save vertonghenb/235b53008ce0897e0920e3449ab122e9 to your computer and use it in GitHub Desktop.
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
@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