🆕 feat(Form): add support for validate single field (#1980)

docs/Masa.Blazor.Docs/Examples/components/forms/ValidateField.razor

@@ -0,0 +1,47 @@
+@using System.ComponentModel.DataAnnotations
+@using Microsoft.AspNetCore.Components.Forms
+
+<MCard Width="360" Outlined Class="pa-4 mx-auto">
+    <MForm @ref="_form" Model="@_model">
+        <MTextField @bind-Value="@_model.Email"
+                    Filled
+                    Dense
+                    Placeholder="Email"
+                    PersistentPlaceholder>
+        </MTextField>
+        <div class="d-flex align-center">
+            <MTextField @bind-Value="@_model.Code"
+                        Filled
+                        Dense
+                        Placeholder="Code"
+                        PersistentPlaceholder
+                        HideDetails="true"
+                        Class="mr-2">
+            </MTextField>
+            <MButton OnClick="@SendCode" Depressed Color="secondary">Send Code</MButton>
+        </div>
+    </MForm>
+</MCard>
+
+@code {
+
+    private MForm? _form;
+    private Model _model = new();
+
+    class Model
+    {
+        [Required] [EmailAddress] public string? Email { get; set; }
+
+        [Parameter] public string? Code { get; set; }
+    }
+
+    private void SendCode()
+    {
+        var isEmailValid = _form!.Validate(FieldIdentifier.Create(() => _model.Email));
+        if (isEmailValid)
+        {
+            // send code
+        }
+    }
+
+}

docs/Masa.Blazor.Docs/wwwroot/pages/components/forms/en-US.md

@@ -31,6 +31,12 @@ In addition to validating on each input component via the `Rules` prop, you can
 
 <masa-example file="Examples.components.forms.Validation"></masa-example>
 
+#### Validate single field {released-on=v1.6.0}
+
+Validate a single field using the `Validate` method of the **MForm** instance.
+
+<masa-example file="Examples.components.forms.ValidateField"></masa-example>
+
 #### Validation with submit and clear {updated-in=v1.6.0}
 
 You can use the methods provided by `Context` in the content of **MForm**, or use the component instance provided by `@ref` outside of **MForm**.

docs/Masa.Blazor.Docs/wwwroot/pages/components/forms/zh-CN.md

@@ -31,6 +31,12 @@ related:
 
 <masa-example file="Examples.components.forms.Validation"></masa-example>
 
+#### 验证单个字段 {released-on=v1.6.0}
+
+使用**MForm**实例的`Validate`方法验证单个字段。
+
+<masa-example file="Examples.components.forms.ValidateField"></masa-example>
+
 #### 通过提交和清除进行验证 {updated-in=v1.6.0}
 
 在 **MForm** 的内容里可以使用 `Context` 提供的方法，在 **MForm** 外部可以使用 `@ref` 拿到组件实例提供的方法。

src/Masa.Blazor/Components/Form/MForm.razor.cs

@@ -113,6 +113,10 @@ private async Task HandleOnSubmitAsync(EventArgs args)
         }
     }
 
+    /// <summary>
+    /// Validate the all fields in the form
+    /// </summary>
+    /// <returns></returns>
     [MasaApiPublicMethod]
     public bool Validate()
     {
@@ -126,7 +130,7 @@ public bool Validate()
                 valid = false;
             }
         }
-
+        
         if (EditContext != null)
         {
             var success = EditContext.Validate();
@@ -139,6 +143,44 @@ public bool Validate()
         return valid;
     }
 
+    /// <summary>
+    /// Validate the specified field in the form
+    /// </summary>
+    /// <param name="validatable"></param>
+    /// <returns></returns>
+    [MasaApiParameter]
+    public bool Validate(IValidatable validatable)
+    {
+        var valid = validatable.Validate();
+
+        if (valid && EditContext is not null)
+        {
+            EditContext.NotifyFieldChanged(validatable.ValueIdentifier);
+            valid = valid && !EditContext.GetValidationMessages(validatable.ValueIdentifier).Any();
+        }
+
+        return valid;
+    }
+
+    /// <summary>
+    /// Validate the specified field in the form
+    /// </summary>
+    /// <param name="fieldIdentifier"></param>
+    /// <returns></returns>
+    /// <exception cref="ArgumentException"></exception>
+    [MasaApiParameter]
+    public bool Validate(FieldIdentifier fieldIdentifier)
+    {
+        var index = Validatables.FindIndex(item => item.ValueIdentifier.Equals(fieldIdentifier));
+        if (index == -1)
+        {
+            throw new ArgumentException($"Field {fieldIdentifier.FieldName} not found in form.");
+        }
+
+        var validatable = Validatables[index];
+        return Validate(validatable);
+    }
+
     /// <summary>
     /// parse form validation result,if parse faield throw exception
     /// </summary>