refactor: 支持表单

Author: ArgoZhang

src/BootstrapBlazor/Components/Input/OtpInput.razor

@@ -4,17 +4,17 @@
 <div @attributes="AdditionalAttributes" id="@Id" class="@ClassString">
     @for (var index = 0; index < Digits; index++)
     {
-            @if(IsReadonly || IsDisabled)
-            {
-                <span class="@ItemClassString">
-                    @GetValueString(index)
-                </span>
-            }
-            else
-            {
-                <input type="@TypeString" class="@InputClassString"
-                       maxlength="@MaxLengthString" inputmode="@TypeModeString" placeholder="@PlaceHolder"
-                       value="@GetValueString(index)" />
-            }
+        @if(IsReadonly || IsDisabled)
+        {
+            <span class="@ItemClassString">
+                @GetValueString(index)
+            </span>
+        }
+        else
+        {
+            <input type="@TypeString" class="@InputClassString"
+                    maxlength="@MaxLengthString" inputmode="@TypeModeString" placeholder="@PlaceHolder"
+                    value="@GetValueString(index)" />
+        }
     }
 </div>

src/BootstrapBlazor/Components/Input/OtpInput.razor.cs

@@ -46,6 +46,7 @@ public partial class OtpInput
 
     private string? InputClassString => CssBuilder.Default("bb-opt-item")
         .AddClass("input-number-fix", Type == OtpInputType.Number)
+        .AddClass(ValidCss)
         .Build();
 
     private string TypeString => Type switch

src/BootstrapBlazor/Components/Input/OtpInput.razor.scss

@@ -30,6 +30,14 @@
             padding: 0;
             text-align: center;
         }
+
+        &.is-valid {
+            --bs-border-color: var(--bs-success);
+        }
+
+        &.is-invalid {
+            --bs-border-color: var(--bs-danger);
+        }
     }
 
     span.bb-opt-item {