model and validation

MyFirstBlazor/BlazingPizza/Model/Address.cs

@@ -1,20 +1,38 @@
 
+using System.ComponentModel.DataAnnotations;
+
 namespace BlazingPizza
 {
     public class Address
     {
         public int Id { get; set; }
 
+        [Required, 
+            MinLength(3, ErrorMessage = "Please use a value bigger than 3 letters."), 
+            MaxLength(100, ErrorMessage = "Please use a value less than 100 letters."),]
         public string Name { get; set; }
 
+        [Required,
+            MinLength(5, ErrorMessage = "Please use a value bigger than 5 letters."), 
+            MaxLength(100, ErrorMessage = "Please use a value less than 100 letters.")]
         public string Line1 { get; set; }
 
+        [Required,
+            MaxLength(100, ErrorMessage = "Please use a value less than 100 letters.")]
         public string Line2 { get; set; }
 
+        [Required, 
+            MinLength(3, ErrorMessage = "Please use a value bigger than 3 letters."), 
+            MaxLength(50, ErrorMessage = "Please use a value less than 50 letters.")]
         public string City { get; set; }
 
+        [Required, 
+            MinLength(3, ErrorMessage = "Please use a value bigger than 3 letters."), 
+            MaxLength(20, ErrorMessage = "Please use a value less than 20 letters.")]
         public string Region { get; set; }
 
+        [Required, 
+            RegularExpression(@"^([0-9]{5})$", ErrorMessage = "Please use a valid postal code with five numbers.")]
         public string PostalCode { get; set; }
     }
 }

MyFirstBlazor/BlazingPizza/Pages/Checkout.razor

@@ -4,9 +4,10 @@
 @inject OrderState OrderState
 @inject HttpClient HttpClient
 @inject NavigationManager NavigationManager
+@implements IDisposable
 
 <div class="main">
-    <EditForm Model="Order.DeliveryAddress" OnSubmit="CheckSubmission">
+    <EditForm EditContext="editContext" OnValidSubmit="PlaceOrder">
         <div class="checkout-cols">
             <div class="checkout-order-details">
                 <h4>Review order</h4>
@@ -23,29 +24,28 @@
             </div>
         </div>
 
-        <button class="checkout-button btn btn-warning" disabled="@isSubmitting">
+        <button class="checkout-button btn btn-warning" type="submit" disabled="@isError">
             Place order
         </button>
+        <DataAnnotationsValidator />
     </EditForm>
 </div>
 
 @code {
     Order Order => OrderState.Order;
-    bool isSubmitting;
+    EditContext editContext;
-    bool isError = false;
+    bool isError = true;
 
-    async Task CheckSubmission(EditContext editContext)
+    protected override void OnInitialized()
     {
-        isSubmitting = true;
+        editContext = new EditContext(Order.DeliveryAddress);
-
+        editContext.OnFieldChanged += HandleFieldChanged;
-        var model = editContext.Model as Address;
+    }
-        isError = string.IsNullOrWhiteSpace(model?.Name)
-            || string.IsNullOrWhiteSpace(model?.Line1)
-            || string.IsNullOrWhiteSpace(model?.PostalCode);
-        if (!isError)
-            await PlaceOrder();
 
-        isSubmitting = false;
+    void HandleFieldChanged(object sender, FieldChangedEventArgs e)
+    {
+        isError = !editContext.Validate();
+        StateHasChanged();
     }
 
     async Task PlaceOrder()
@@ -56,4 +56,14 @@
 
         NavigationManager.NavigateTo($"myorders/{newOrderId}");
     }
+
+    protected void ShowError()
+    {
+        isError = true;
+    }
+
+    public void Dispose()
+    {
+        editContext.OnFieldChanged -= HandleFieldChanged;
+    }
 }

MyFirstBlazor/BlazingPizza/Shared/AddressEditor.razor

@@ -2,6 +2,7 @@
     <label>Name:</label>
     <div>
         <InputText @bind-Value="Address.Name" />
+        <ValidationMessage For="@(() => Address.Name)" />
     </div>
 </div>
 
@@ -9,6 +10,7 @@
     <label>Line 1:</label>
     <div>
         <InputText @bind-Value="Address.Line1" />
+        <ValidationMessage For="@(() => Address.Line1)" />
     </div>
 </div>
 
@@ -16,6 +18,7 @@
     <label>Line 2:</label>
     <div>
         <InputText @bind-Value="Address.Line2" />
+        <ValidationMessage For="@(() => Address.Line2)" />
     </div>
 </div>
 
@@ -23,6 +26,7 @@
     <label>City:</label>
     <div>
         <InputText @bind-Value="Address.City" />
+        <ValidationMessage For="@(() => Address.City)" />
     </div>
 </div>
 
@@ -30,6 +34,7 @@
     <label>Region:</label>
     <div>
         <InputText @bind-Value="Address.Region" />
+        <ValidationMessage For="@(() => Address.Region)" />
     </div>
 </div>
 
@@ -37,6 +42,7 @@
     <label>Postal code:</label>
     <div>
         <InputText @bind-Value="Address.PostalCode" />
+        <ValidationMessage For="@(() => Address.PostalCode)" />
     </div>
 </div>