fix(BootstrapInputGroupLabel): should show DisplayText when bind-Value in ValidateForm (#5167)

* refactor: 代码格式化

* fix: 修复 DisplayText 丢失问题

* doc: 更新示例

* test: 更新单元测试

Author: ArgoZhang

src/BootstrapBlazor.Server/Components/Samples/InputGroups.razor

@@ -113,14 +113,14 @@
     <ValidateForm Model="@Model">
         <div class="@GroupFormClassString">
             <div class="col-12 col-sm-6">
-                <BootstrapInputGroupLabel @bind-Value="@Model.Name" required="true" />
+                <BootstrapInputGroupLabel @bind-Value="@Model.Name" ShowRequiredMark="true" />
                 <BootstrapInputGroup>
                     <Display @bind-Value="@Model.Name"></Display>
                     <BootstrapInputGroupLabel @bind-Value="@Model.Name" />
                 </BootstrapInputGroup>
             </div>
             <div class="col-12 col-sm-6">
-                <BootstrapInputGroupLabel @bind-Value="@Model.Address" required="true" />
+                <BootstrapInputGroupLabel @bind-Value="@Model.Address" ShowRequiredMark="true" />
                 <BootstrapInputGroup>
                     <Display @bind-Value="@Model.Address"></Display>
                     <BootstrapInputGroupLabel @bind-Value="@Model.Address" />

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

@@ -19,9 +19,9 @@ public partial class BootstrapInputGroupLabel
         .Build();
 
     private string? StyleString => CssBuilder.Default()
-    .AddClass($"--bb-input-group-label-width: {Width}px;", Width.HasValue)
-    .AddClassFromAttributes(AdditionalAttributes)
-    .Build();
+        .AddClass($"--bb-input-group-label-width: {Width}px;", Width.HasValue)
+        .AddClassFromAttributes(AdditionalAttributes)
+        .Build();
 
     private bool IsInnerLabel { get; set; }
 
@@ -53,5 +53,10 @@ protected override void OnParametersSet()
         base.OnParametersSet();
 
         IsInnerLabel = InputGroup != null;
+
+        if (IsInnerLabel)
+        {
+            DisplayText ??= FieldIdentifier?.GetDisplayName();
+        }
     }
 }

test/UnitTest/Components/DisplayTest.cs

@@ -191,7 +191,7 @@ public void ShowTooltip_Ok()
     [Fact]
     public void Bind_Ok()
     {
-        var foo = new Foo();
+        var foo = new Foo() { Name = "test-name" };
         var cut = Context.RenderComponent<ValidateForm>(pb =>
         {
             pb.Add(a => a.Model, foo);
@@ -201,21 +201,21 @@ public void Bind_Ok()
                 {
                     builder.OpenComponent<Display<string>>(0);
                     builder.AddAttribute(1, "Value", foo.Name);
-                    builder.AddAttribute(2, "ValueExpression",
-                        Utility.GenerateValueExpression(foo, "Name", typeof(string)));
+                    builder.AddAttribute(2, "ValueExpression", Utility.GenerateValueExpression(foo, "Name", typeof(string)));
                     builder.CloseComponent();
 
                     builder.OpenComponent<BootstrapInputGroupLabel>(3);
                     builder.AddAttribute(4, "Value", "Name");
-                    builder.AddAttribute(5, "ValueExpression",
-                        Utility.GenerateValueExpression(foo, "Name", typeof(string)));
+                    builder.AddAttribute(5, "ValueExpression", Utility.GenerateValueExpression(foo, "Name", typeof(string)));
+                    builder.CloseComponent();
+
+                    builder.OpenComponent<BootstrapInputGroupLabel>(3);
+                    builder.AddAttribute(6, "Value", "Name");
                     builder.CloseComponent();
                 });
             });
         });
-        Assert.Contains("is-display", cut.Markup);
-        Assert.Contains("input-group-text", cut.Markup);
-        Assert.DoesNotContain("<span>姓名</span>", cut.Markup);
+        Assert.Contains("<div class=\"input-group\"><div class=\"form-control is-display\">test-name</div><div class=\"input-group-text\"><span>姓名</span></div><div class=\"input-group-text\"><span></span></div></div>", cut.Markup);
     }
 
     [Fact]