added missing validation output for select element to grid create and…

… update component (#328) added number input type Co-authored-by: gsuchomski <[email protected]>
gustavnavar · Jan 20, 2022 · 7184c70 · 7184c70
1 parent 6022369
commit 7184c70
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 5 deletions.
diff --git a/GridBlazor/Pages/GridCreateComponent.razor b/GridBlazor/Pages/GridCreateComponent.razor
@@ -52,7 +52,7 @@
                             else
                             {
                                 var selectedValue = column.GetFormatedValue(value);
-                                <select id="@column.FieldName" name="@column.FieldName" class="form-control" value="@selectedValue" @onchange="(e) => ChangeValue(e, column)">
+                                <select id="@column.FieldName" name="@column.FieldName" class="form-control @(ColumnErrors.ContainsKey(@column.FieldName) ? "input-validation-error" : "")" value="@selectedValue" @onchange="(e) => ChangeValue(e, column)">
                                     <option value="">@Strings.SelectItem</option>
                                     @foreach (var selectItem in ((IGridColumn<T>)column).SelectItems)
                                     {
@@ -66,6 +66,9 @@
                                         }
                                     }
                                 </select>
+                                <span class="field-validation-error">
+                                    <span>@ColumnErrors.Get(column.FieldName)</span>
+                                </span>              
                             }
                         }
                         else if (((IGridColumn<T>)column).IsSelectColumn.IsSelectKey)
@@ -78,7 +81,7 @@
                             else
                             {
                                 var selectedValue = column.GetFormatedValue(value);
-                                <select id="@column.FieldName" name="@column.FieldName" class="form-control" value="@selectedValue" @onchange="(e) => ChangeValue(e, column)">
+                                <select id="@column.FieldName" name="@column.FieldName" class="form-control @(ColumnErrors.ContainsKey(@column.FieldName) ? "input-validation-error" : "")" value="@selectedValue" @onchange="(e) => ChangeValue(e, column)">
                                     <option value="">@Strings.SelectItem</option>
                                     @{       
                                         var selectItems = SelectItems.Get(column.Name);
@@ -98,6 +101,9 @@
                                         }
                                     }
                                 </select>
+                                <span class="field-validation-error">
+                                    <span>@ColumnErrors.Get(column.FieldName)</span>
+                                </span>
                             }
                         }
                         else
@@ -275,6 +281,10 @@
                                     }
                                 }
                             }
+                            else if (((IGridColumn<T>)column).InputType == InputType.Number)
+                            {
+                                <input type="@(InputType.Number.ToTypeAttr())" id="@column.FieldName" name="@column.FieldName" class="form-control @(ColumnErrors.ContainsKey(@column.FieldName) ? "input-validation-error" : "")" value="@column.GetFormatedValue(value)" @onchange="(e) => ChangeValue(e, column)" />
+                            }
                             else
                             {
                                 <input id="@column.FieldName" name="@column.FieldName" class="form-control @(ColumnErrors.ContainsKey(@column.FieldName) ? "input-validation-error" : "")" value="@column.GetFormatedValue(value)" @onchange="(e) => ChangeValue(e, column)" />

diff --git a/GridBlazor/Pages/GridUpdateComponent.razor b/GridBlazor/Pages/GridUpdateComponent.razor
@@ -56,7 +56,7 @@
                             else
                             {
                                 var selectedValue = column.GetFormatedValue(value);
-                                <select id="@column.FieldName" name="@column.FieldName" class="form-control" value="@selectedValue" @onchange="(e) => ChangeValue(e, column)">
+                                <select id="@column.FieldName" name="@column.FieldName" class="form-control @(ColumnErrors.ContainsKey(@column.FieldName) ? "input-validation-error" : "")" value="@selectedValue" @onchange="(e) => ChangeValue(e, column)">
                                     <option value="">@Strings.SelectItem</option>
                                     @foreach (var selectItem in ((IGridColumn<T>)column).SelectItems)
                                     {
@@ -70,6 +70,9 @@
                                         }
                                     }
                                 </select>
+                                 <span class="field-validation-error">
+                                    <span>@ColumnErrors.Get(column.FieldName)</span>
+                                </span>
                             }
                         }
                         else if (((IGridColumn<T>)column).IsSelectColumn.IsSelectKey)
@@ -82,7 +85,7 @@
                             else
                             {
                                 var selectedValue = column.GetFormatedValue(value);
-                                <select id="@column.FieldName" name="@column.FieldName" class="form-control" value="@selectedValue" @onchange="(e) => ChangeValue(e, column)">
+                                <select id="@column.FieldName" name="@column.FieldName" class="form-control @(ColumnErrors.ContainsKey(@column.FieldName) ? "input-validation-error" : "")" value="@selectedValue" @onchange="(e) => ChangeValue(e, column)">
                                     <option value="">@Strings.SelectItem</option>
                                     @{
                                         var selectItems = SelectItems.Get(column.Name);
@@ -102,6 +105,9 @@
                                         }
                                     }
                                 </select>
+                                 <span class="field-validation-error">
+                                    <span>@ColumnErrors.Get(column.FieldName)</span>
+                                </span>
                             }
                         }
                         else
@@ -274,6 +280,10 @@
                                         }
                                     }
                                 }
+                                else if (((IGridColumn<T>)column).InputType == InputType.Number)
+                                {
+                                    <input type="@(InputType.Number.ToTypeAttr())" id="@column.FieldName" name="@column.FieldName" class="form-control @(ColumnErrors.ContainsKey(@column.FieldName) ? "input-validation-error" : "")" value="@column.GetFormatedValue(value)" @onchange="(e) => ChangeValue(e, column)" />
+                                }
                                 else
                                 {
                                     <input id="@column.FieldName" name="@column.FieldName" class="form-control @(ColumnErrors.ContainsKey(@column.FieldName) ? "input-validation-error" : "")" value="@column.GetFormatedValue(value)" @onchange="(e) => ChangeValue(e, column)" />

diff --git a/GridShared/Columns/InputType.cs b/GridShared/Columns/InputType.cs
@@ -10,7 +10,8 @@ public enum InputType
         DateTimeLocal,
         Week,
         Month,
-        File
+        File,
+        Number
     }
 
     public static class InputTypeExtensions
@@ -33,6 +34,8 @@ public static string ToTypeAttr(this InputType me)
                     return "month";
                 case InputType.File:
                     return "file";
+                case InputType.Number:
+                    return "number";
                 default:
                     return "";
             }