Blazor实现高级表单功能

思路

1. 添加Form组件类，提供Validate，OnSubmit等
2. 添加Field组件基类，提供Id，Label，Value等
3. 添加Field子组件Text、Password等表单字段组件
4. 添加FormContext类，存储表单及字段数据
5. 使用级联值组件传递FormContext实例（关键）

Form组件

public class FormContext {
    public Dictionary Fields { get; }
}

public class Form : BaseComponent {
    [Parameter] public RenderFragment ChildContent { get; set; }
    public FormContext Context { get; }
    public bool Validate() { return false; }
    
    protected override void BuildRenderTree(RenderTreeBuilder builder) {
        builder.Div(attr => {
            attr.Class(Style);
            builder.Component>(attr => {
                attr.Add(nameof(CascadingValue.Value), Context);
                attr.Add(nameof(CascadingValue.ChildContent), ChildContent);
            });
        });
    }
}

Field组件

public class Field : BaseComponent {
    [Parameter] public string Id { get; set; }
    [Parameter] public string Label { get; set; }
    [CascadingParameter]
    protected FormContext Context { get; set; }
    protected override void OnInitialized() {
        base.OnInitialized();
        Context.Fields[Id] = this;
    }
    protected override void BuildRenderTree(RenderTreeBuilder builder) {
    }
    protected virtual void BuidChildContent(RenderTreeBuilder builder) {}
}

public class Text : Field {
    [Parameter] public string Icon { get; set; }
    [Parameter] public string Placeholder { get; set; }
    protected override void BuidChildContent(RenderTreeBuilder builder) {
    }
}

public class Password : Field {
    [Parameter] public string Icon { get; set; }
    [Parameter] public string Placeholder { get; set; }
    protected override void BuidChildContent(RenderTreeBuilder builder) {
    }
}

Form示例

    
    
    

@code {
    private Form form;
    private void OnLogin() {
        if (!form.Validate())
            return;
    }
}