Skip to content

Commit 069a91f

Browse files
oroztociljaviercn
oroztocil
authored and
javiercn
committed
Simplify the sample form
1 parent 826ab4c commit 069a91f

File tree

4 files changed

+27
-45
lines changed

4 files changed

+27
-45
lines changed

‎src/Components/Forms/src/EditContextDataAnnotationsExtensions.cs‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -193,10 +193,12 @@ private bool TryValidateTypeInfo(ValidationContext validationContext)
193193
{
194194
foreach (var (fieldKey, messages) in validationErrors)
195195
{
196-
// Reverse mapping based on storing references during validation
196+
// Reverse mapping based on storing references during validation.
197+
// With this approach, we could skip iterating over ValidateContext.ValidationErrors and pass the errors
198+
// directly to ValidationMessageStore in the OnValidationError handler.
197199
var fieldContainer = containerMapping[fieldKey] ?? _editContext.Model;
198200

199-
// Alternative: Reverse mapping based on object graph walk
201+
// Alternative: Reverse mapping based on object graph walk.
200202
//var fieldContainer = GetFieldContainer(_editContext.Model, fieldKey);
201203

202204
var lastDotIndex = fieldKey.LastIndexOf('.');

‎src/Components/Samples/BlazorUnitedApp/Pages/ComplexFormPage.razor‎

Lines changed: 23 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88

99
<EditForm Model="@order" OnValidSubmit="@HandleValidSubmit" OnInvalidSubmit="@HandleInvalidSubmit">
1010
<DataAnnotationsValidator />
11-
11+
1212
<div class="container mt-4">
1313
<h4>Order Details</h4>
1414
<div class="mb-3">
@@ -32,24 +32,21 @@
3232
<InputText id="customerEmail" @bind-Value="order.CustomerDetails.Email" class="form-control" />
3333
<ValidationMessage For="@(() => order.CustomerDetails.Email)" />
3434
</div>
35-
<div class="mb-3">
36-
<label for="customerAge" class="form-label">Age</label>
37-
<InputNumber id="customerAge" @bind-Value="order.CustomerDetails.Age" class="form-control" />
38-
<ValidationMessage For="@(() => order.CustomerDetails.Age)" />
39-
</div>
4035

4136
<h5>Shipping Address</h5>
4237
<div class="card mb-3">
4338
<div class="card-body">
44-
<div class="mb-3">
45-
<label for="shippingStreet" class="form-label">Street</label>
46-
<InputText id="shippingStreet" @bind-Value="order.CustomerDetails.ShippingAddress.Street" class="form-control" />
47-
<ValidationMessage For="@(() => order.CustomerDetails.ShippingAddress.Street)" />
48-
</div>
49-
<div class="mb-3">
50-
<label for="shippingZipCode" class="form-label">Zip Code</label>
51-
<InputText id="shippingZipCode" @bind-Value="order.CustomerDetails.ShippingAddress.ZipCode" class="form-control" />
52-
<ValidationMessage For="@(() => order.CustomerDetails.ShippingAddress.ZipCode)" />
39+
<div class="row">
40+
<div class="mb-3 col-sm-8">
41+
<label for="shippingStreet" class="form-label">Street</label>
42+
<InputText id="shippingStreet" @bind-Value="order.CustomerDetails.ShippingAddress.Street" class="form-control" />
43+
<ValidationMessage For="@(() => order.CustomerDetails.ShippingAddress.Street)" />
44+
</div>
45+
<div class="mb-3 col-sm">
46+
<label for="shippingZipCode" class="form-label">Zip Code</label>
47+
<InputText id="shippingZipCode" @bind-Value="order.CustomerDetails.ShippingAddress.ZipCode" class="form-control" />
48+
<ValidationMessage For="@(() => order.CustomerDetails.ShippingAddress.ZipCode)" />
49+
</div>
5350
</div>
5451
</div>
5552
</div>
@@ -70,22 +67,17 @@
7067
<button type="button" class="btn btn-sm btn-danger" @onclick="() => RemoveOrderItem(itemIndex)">Remove</button>
7168
</div>
7269
<div class="card-body">
73-
<div class="mb-3">
74-
<label for="@($"productName_{itemIndex}")" class="form-label">Product Name</label>
75-
<InputText id="@($"productName_{itemIndex}")" @bind-Value="order.OrderItems[itemIndex].ProductName" class="form-control" />
76-
<ValidationMessage For="@(() => order.OrderItems[itemIndex].ProductName)" />
77-
</div>
7870
<div class="row">
79-
<div class="col-md-6 mb-3">
71+
<div class="mb-3 col-sm-8">
72+
<label for="@($"productName_{itemIndex}")" class="form-label">Product Name</label>
73+
<InputText id="@($"productName_{itemIndex}")" @bind-Value="order.OrderItems[itemIndex].ProductName" class="form-control" />
74+
<ValidationMessage For="@(() => order.OrderItems[itemIndex].ProductName)" />
75+
</div>
76+
<div class="mb-3 col-sm">
8077
<label for="@($"quantity_{itemIndex}")" class="form-label">Quantity</label>
8178
<InputNumber id="@($"quantity_{itemIndex}")" @bind-Value="order.OrderItems[itemIndex].Quantity" class="form-control" />
8279
<ValidationMessage For="@(() => order.OrderItems[itemIndex].Quantity)" />
8380
</div>
84-
<div class="col-md-6 mb-3">
85-
<label for="@($"price_{itemIndex}")" class="form-label">Price</label>
86-
<InputNumber id="@($"price_{itemIndex}")" @bind-Value="order.OrderItems[itemIndex].Price" class="form-control" TValue="decimal" ParseErrorMessage="Please enter a valid price." />
87-
<ValidationMessage For="@(() => order.OrderItems[itemIndex].Price)" />
88-
</div>
8981
</div>
9082
</div>
9183
</div>
@@ -95,7 +87,7 @@
9587
{
9688
<p>No order items. Add one below.</p>
9789
}
98-
90+
9991
<button type="button" class="btn btn-success mb-3" @onclick="AddOrderItem">Add Order Item</button>
10092

10193
<hr />
@@ -118,15 +110,15 @@
118110
<ul>
119111
@foreach (var item in order.OrderItems)
120112
{
121-
<li>@item.Quantity x @item.ProductName at @item.Price.ToString("C")</li>
113+
<li>@item.Quantity x @item.ProductName</li>
122114
}
123115
</ul>
124116
</div>
125117
}
126118

127119
@if (submitFailed)
128120
{
129-
<div class="mt-4 alert alert-danger" role="alert">
121+
<div class="mt-4 alert alert-danger" role="alert">
130122
<h4>Form Submission Failed!</h4>
131123
<p>Please correct the validation errors and try again.</p>
132124
</div>
@@ -141,12 +133,8 @@
141133
private void HandleValidSubmit()
142134
{
143135
Console.WriteLine("Form submitted successfully!");
144-
// Here you would typically process the order
145-
// For demo purposes, we'll just display a success message
146136
submitted = true;
147137
submitFailed = false;
148-
// To see the data in console:
149-
// System.Text.Json.JsonSerializer.Serialize(order);
150138
}
151139

152140
private void HandleInvalidSubmit()
@@ -159,7 +147,7 @@
159147
private void AddOrderItem()
160148
{
161149
order.OrderItems.Add(new OrderItemModel());
162-
submitted = false; // Reset submission status
150+
submitted = false;
163151
submitFailed = false;
164152
}
165153

@@ -169,7 +157,7 @@
169157
{
170158
order.OrderItems.RemoveAt(index);
171159
}
172-
submitted = false; // Reset submission status
160+
submitted = false;
173161
submitFailed = false;
174162
}
175163
}

‎src/Components/Samples/BlazorUnitedApp/Validation/CustomerModel.cs‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,5 @@ public class CustomerModel
1111
[EmailAddress(ErrorMessage = "Invalid Email Address.")]
1212
public string? Email { get; set; }
1313

14-
[Required(ErrorMessage = "Age is required.")]
15-
[Range(18, 99, ErrorMessage = "Age must be between 18 and 99.")]
16-
public int? Age { get; set; }
17-
1814
public AddressModel ShippingAddress { get; set; } = new AddressModel();
1915
}

‎src/Components/Samples/BlazorUnitedApp/Validation/OrderItemModel.cs‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,4 @@ public class OrderItemModel
1212

1313
[Range(1, 100, ErrorMessage = "Quantity must be between 1 and 100.")]
1414
public int Quantity { get; set; } = 1;
15-
16-
[Range(0.01, 1000.00, ErrorMessage = "Price must be between $0.01 and $1000.00.")]
17-
[DataType(DataType.Currency)]
18-
public decimal Price { get; set; } = 0.01m;
1915
}

0 commit comments

Comments
 (0)