Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

ValidateForm 表单组件

可供数据合规检查的表单组件

放置到 ValidateForm 中的组件提交时自动进行数据合规检查

Demo

组件说明:

  • ValidateForm 组件支持异步设置 Model
  • 表单事件为 OnValidSubmit OnInvalidSubmit
  • Model 参数为必填项不允许为空
  • 表单内可以放置多个按钮,通过设置 ButtonType="ButtonType.Submit" 参数是否提交表单
  • 客户端验证机制支持模型的 Required 标签,通过设置 ErrorMessage 参数设置提示信息,未设置时使用默认的英文提示信息
  • 表单默认检查表单内绑定字段值是否合法,如需要检查模型所有字段时可设置 ValidateAllProperties 属性值为 true
  • 通过设置提交按钮 Button 属性 IsAsync 值,设置异步提交表单

注意事项:

  • 表单内组件通常用法都是使用双向绑定技术对 Model 的属性值进行双向绑定,当其值改变时会导致所在组件 StateHasChanged 方法被调用,即其所在组件或者页面进行刷新重新渲染

放置支持表单组件到 ValidateForm

Demo

示例说明

  • 姓名为字符串类型
  • 年龄为整数类型
  • 生日为时间类型
  • 教育为枚举类型
  • 爱好为集合类型

本例中通过设置 提交按钮 属性 IsAsync 来异步提交表单,点击提交后禁用自身,异步操作完毕后恢复

  •  
  • 0
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  •  
  • 0
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  •  
  • 0
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
2021 September
SunMonTueWedThuFriSat
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
8
9
2020
2021
2022
2023
2024
2025
2026
2027
2028
2029
2030
2031
2032
2033
2034
2035
2036
2037
2038
2039
Jan
Feb
Mar
Apr
May
Jun
Jul
Aug
Sep
Oct
Nov
Dec

通过调用 SetError 方法设置自定义错误信息

Demo

应用场景

客户端验证通过后进行数据库保存操作,如果出现其他问题,后仍然可以进行表单自定义错误提示,本例中数据验证合法后,点击 提交表单 按钮后,姓名字段会显示 数据库中已存在 这样的自定义提示信息

  •  
  • 0
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  •  
  • 0
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  •  
  • 0
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
2021 September
SunMonTueWedThuFriSat
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
8
9
2020
2021
2022
2023
2024
2025
2026
2027
2028
2029
2030
2031
2032
2033
2034
2035
2036
2037
2038
2039
Jan
Feb
Mar
Apr
May
Jun
Jul
Aug
Sep
Oct
Nov
Dec

此组件默认检查表单内模型绑定字段值,如需要检查模型所有字段值时设置 ValidateAllProperties

Demo

本例中未放置 Address,由于设置 ValidateAllProperties 参数值为 true,所以 Address 字段仍然被检查,及时表单内所有数据均合法后,提交数据时仍然触发 OnInvalidSubmit 回调委托

  •  
  • 0
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  •  
  • 0
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  •  
  • 0
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
2021 September
SunMonTueWedThuFriSat
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
8
9
2020
2021
2022
2023
2024
2025
2026
2027
2028
2029
2030
2031
2032
2033
2034
2035
2036
2037
2038
2039
Jan
Feb
Mar
Apr
May
Jun
Jul
Aug
Sep
Oct
Nov
Dec

支持任意复杂类型的绑定与验证

Demo

本示例中第二个绑定的是一个超级复杂类型 ComplexModel.Dummy.Dummy2.Name 清空值后,点击 提交表单 会对数据进行验证。第二个文本框验证合规后,通过调用 SetError 再次显示错误提示

ComplexForm.SetError("Dummy.Dummy2.Name", "数据库中已存在");

通过代码更改表单内组件,验证表单仍然可以正确的进行验证

Demo

点击 更改组件 按钮后 地址 组件变更为 数量 组件,重置组件 按钮恢复,姓名 地址 组件为必填项,数量 组件有默认值 0 所以可以通过数据检查

通过样式统一设置全站或者特定表单内标签对齐方式

Demo
Loading...

Attributes

Loading...

Methods

Loading...
@page "/validateforms"

<h3>ValidateForm 表单组件</h3>

<h4>可供数据合规检查的表单组件</h4>

<Block Title="基础用法" Introduction="放置到 <code>ValidateForm</code> 中的组件提交时自动进行数据合规检查">
    <p>组件说明:</p>
    <ul class="ul-demo">
        <li><code>ValidateForm</code> 组件支持异步设置 <code>Model</code> 值</li>
        <li>表单事件为 <code>OnValidSubmit</code> <code>OnInvalidSubmit</code></li>
        <li><code>Model</code> 参数为必填项不允许为空</li>
        <li>表单内可以放置多个按钮,通过设置 <code>ButtonType="ButtonType.Submit"</code> 参数是否提交表单</li>
        <li>客户端验证机制支持模型的 <code>Required</code> 标签,通过设置 <code>ErrorMessage</code> 参数设置提示信息,未设置时使用默认的英文提示信息</li>
        <li>表单默认检查表单内绑定字段值是否合法,如需要检查模型所有字段时可设置 <code>ValidateAllProperties</code> 属性值为 <code>true</code></li>
        <li>通过设置提交按钮 <code>Button</code> 属性 <code>IsAsync</code> 值,设置异步提交表单</li>
    </ul>
    <p>注意事项:</p>
    <ul class="ul-demo">
        <li>
            表单内组件通常用法都是使用双向绑定技术对 <code>Model</code> 的属性值进行双向绑定,当其值改变时会导致所在组件 <code>StateHasChanged</code>
            方法被调用,即其所在组件或者页面进行刷新重新渲染
        </li>
    </ul>
    <div class="form-demo">
        <ValidateForm Model="@Model" OnInvalidSubmit="@OnInvalidSubmit1"
                      OnValidSubmit="@OnValidSubmit1">
            <div class="row g-3">
                <div class="col-12">
                    <BootstrapInput @bind-Value="@Model.Name" />
                </div>
                <div class="col-12">
                    <Button ButtonType="ButtonType.Submit" Icon="fa fa-fw fa-save" Text="提交表单" IsAsync="true" />
                </div>
            </div>
        </ValidateForm>
        <BlockLogger @ref="Trace" class="mt-3" />
    </div>
</Block>

<Block Title="内置组件" Introduction="放置支持表单组件到 <code>ValidateForm</code> 中">
    <div class="form-demo">
        <label class="legend">支持表单验证的组件示例</label>
        <p>示例说明</p>
        <ul>
            <li>姓名为字符串类型</li>
            <li>年龄为整数类型</li>
            <li>生日为时间类型</li>
            <li>教育为枚举类型</li>
            <li>爱好为集合类型</li>
        </ul>
        <p>本例中通过设置 <b>提交按钮</b> 属性 <code>IsAsync</code> 来异步提交表单,点击提交后禁用自身,异步操作完毕后恢复</p>
        <ValidateForm Model="@Model" OnValidSubmit="@OnValidSubmit"
                      OnInvalidSubmit="@OnInvalidSubmit">
            <div class="row g-3">
                <div class="col-12 col-sm-6">
                    <BootstrapInput @bind-Value="@Model.Name" />
                </div>
                <div class="col-12 col-sm-6">
                    <BootstrapInputNumber @bind-Value="@Model.Count" />
                </div>
                <div class="col-12 col-sm-6">
                    <DateTimePicker @bind-Value="@Model.DateTime" />
                </div>
                <div class="col-12 col-sm-6">
                    <Select @bind-Value="@Model.Education" />
                </div>
                <div class="col-12">
                    <CheckboxList @bind-Value="@Model.Hobby" Items="@Hobbys" />
                </div>
                <div class="col-12">
                    <Button ButtonType="@ButtonType.Submit" Icon="fa fa-fw fa-save" IsAsync="true" Text="提交表单" />
                </div>
            </div>
        </ValidateForm>
        <BlockLogger @ref="Trace2" class="mt-3" />
    </div>
</Block>

<Block Title="自定义显示错误信息" Introduction="通过调用 <code>SetError</code> 方法设置自定义错误信息">
    <p>
        <b>应用场景</b>
        <div>
            客户端验证通过后进行数据库保存操作,如果出现其他问题,后仍然可以进行表单自定义错误提示,本例中数据验证合法后,点击 <code>提交表单</code> 按钮后,姓名字段会显示 <code>数据库中已存在</code>
            这样的自定义提示信息
        </div>
    </p>
    <ValidateForm @ref="FooForm" Model="@Model" OnValidSubmit="@OnValidSetError">
        <div class="row g-3">
            <div class="col-12 col-sm-6">
                <BootstrapInput @bind-Value="@Model.Name" />
            </div>
            <div class="col-12 col-sm-6">
                <BootstrapInputNumber @bind-Value="@Model.Count" />
            </div>
            <div class="col-12 col-sm-6">
                <DateTimePicker @bind-Value="@Model.DateTime" />
            </div>
            <div class="col-12 col-sm-6">
                <Select @bind-Value="@Model.Education" />
            </div>
            <div class="col-12">
                <CheckboxList @bind-Value="@Model.Hobby" Items="@Hobbys" />
            </div>
            <div class="col-12">
                <Button ButtonType="@ButtonType.Submit" Text="提交表单" />
            </div>
        </div>
    </ValidateForm>
</Block>

<Block Title="验证所有字段值" Introduction="此组件默认检查表单内模型绑定字段值,如需要检查模型所有字段值时设置 <code>ValidateAllProperties</code> 值">
    <p>
        本例中未放置 <code>Address</code>,由于设置 <code>ValidateAllProperties</code> 参数值为 <code>true</code>,所以
        <code>Address</code> 字段仍然被检查,及时表单内所有数据均合法后,提交数据时仍然触发 <code>OnInvalidSubmit</code> 回调委托
    </p>
    <ValidateForm Model="@Model" OnInvalidSubmit="@OnInvalidSubmitAddress"
                  ValidateAllProperties="true">
        <div class="row g-3">
            <div class="col-12 col-sm-6">
                <BootstrapInput @bind-Value="@Model.Name" />
            </div>
            <div class="col-12 col-sm-6">
                <BootstrapInputNumber @bind-Value="@Model.Count" />
            </div>
            <div class="col-12 col-sm-6">
                <DateTimePicker @bind-Value="@Model.DateTime" />
            </div>
            <div class="col-12 col-sm-6">
                <Select @bind-Value="@Model.Education" />
            </div>
            <div class="col-12">
                <CheckboxList @bind-Value="@Model.Hobby" Items="@Hobbys" />
            </div>
            <div class="col-12">
                <Button ButtonType="@ButtonType.Submit" Text="提交表单" />
            </div>
        </div>
    </ValidateForm>
    <BlockLogger @ref="Trace3" class="mt-3" />
</Block>

<Block Title="复杂类型支持" Introduction="支持任意复杂类型的绑定与验证">
    <p>
        本示例中第二个绑定的是一个超级复杂类型 <code>ComplexModel.Dummy.Dummy2.Name</code> 清空值后,点击 <b>提交表单</b> 会对数据进行验证。第二个文本框验证合规后,通过调用
        <code>SetError</code> 再次显示错误提示
    </p>
    <Pre>ComplexForm.SetError("Dummy.Dummy2.Name", "数据库中已存在");</Pre>
    <ValidateForm @ref="ComplexForm" Model="@ComplexModel" OnInvalidSubmit="@OnInvalidComplexModel"
                  OnValidSubmit="@OnValidComplexModel">
        <div class="row g-3">
            <div class="col-12 col-sm-6">
                <BootstrapInput @bind-Value="@ComplexModel.Name" />
            </div>
            <div class="col-12 col-sm-6">
                <BootstrapInput @bind-Value="@ComplexModel.Dummy.Dummy2.Name" />
            </div>
            <div class="col-12">
                <Button ButtonType="@ButtonType.Submit" Text="提交表单" />
            </div>
        </div>
    </ValidateForm>
    <BlockLogger @ref="Trace4" class="mt-3" />
</Block>

<Block Title="动态调整表单内组件" Introduction="通过代码更改表单内组件,验证表单仍然可以正确的进行验证">
    <p>
        点击 <b>更改组件</b> 按钮后 <code>地址</code> 组件变更为 <code>数量</code> 组件,<b>重置组件</b> 按钮恢复,<code>姓名</code> <code>地址</code>
        组件为必填项,<code>数量</code> 组件有默认值 <code>0</code> 所以可以通过数据检查
    </p>
    <ValidateForm Model="@DynamicModel" OnInvalidSubmit="@OnInvalidDynamicModel"
                  OnValidSubmit="@OnValidDynamicModel">
        <div class="row g-3">
            <div class="col-12 col-sm-6">
                <BootstrapInput @bind-Value="@DynamicModel.Name" />
            </div>
            <div class="col-12 col-sm-6">
                @if (ShowAddress)
                {
                    <BootstrapInput @bind-Value="@DynamicModel.Address" />
                }
                else
                {
                    <BootstrapInput @bind-Value="@DynamicModel.Count" />
                }
            </div>
            <div class="col-12">
                <Button ButtonType="@ButtonType.Submit" Text="提交表单" />
                <Button Text="更改组件" OnClick="OnValidateChange" class="ms-3" />
                <Button Text="重置组件" OnClick="OnValidateReset" class="ms-3" />
            </div>
        </div>
    </ValidateForm>
    <BlockLogger @ref="Trace5" class="mt-3" />
</Block>

<Block Title="表单内设置组件标签右对齐" Introduction="通过样式统一设置全站或者特定表单内标签对齐方式">
    <ValidateForm Model="@Model">
        <EditorForm TModel="Foo" ItemsPerRow="2" RowType="RowType.Inline" LabelAlign="Alignment.Right">
            <FieldItems>
                <EditorItem @bind-Field="@context.Hobby" Data="@Hobbys" />
            </FieldItems>
        </EditorForm>
    </ValidateForm>
</Block>

<AttributeTable Items="@GetAttributes()" />

<MethodTable Items="@GetMethods()" />
// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
// Website: https://www.blazor.zone or https://argozhang.github.io/

using BootstrapBlazor.Components;
using BootstrapBlazor.Shared.Common;
using BootstrapBlazor.Shared.Pages.Components;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Forms;
using Microsoft.Extensions.Localization;
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Diagnostics.CodeAnalysis;
using System.Threading.Tasks;

namespace BootstrapBlazor.Shared.Pages
{
    /// <summary>
    ///
    /// </summary>
    public partial class ValidateForms
    {
        [NotNull]
        private BlockLogger? Trace { get; set; }

        [NotNull]
        private BlockLogger? Trace2 { get; set; }

        [NotNull]
        private BlockLogger? Trace3 { get; set; }

        [NotNull]
        private BlockLogger? Trace4 { get; set; }

        [Inject]
        [NotNull]
        private IStringLocalizer<Foo>? LocalizerFoo { get; set; }

        [NotNull]
        private Foo? Model { get; set; }

        [NotNull]
        private IEnumerable<SelectedItem>? Hobbys { get; set; }

        [NotNull]
        private ValidateForm? FooForm { get; set; }

        [NotNull]
        private ValidateForm? ComplexForm { get; set; }

        [NotNull]
        private ComplexFoo? ComplexModel { get; set; }

        /// <summary>
        /// OnInitializedAsync 方法
        /// </summary>
        /// <returns></returns>
        protected override async Task OnInitializedAsync()
        {
            await base.OnInitializedAsync();

            // 切换线程 模拟异步通过 webapi 加载数据
            await Task.Yield();

            Model = new() { Name = "Name", Education = EnumEducation.Primary, DateTime = DateTime.Now };

            // 初始化参数
            Hobbys = Foo.GenerateHobbys(LocalizerFoo);
            ComplexModel = new ComplexFoo()
            {
                Dummy = new Dummy1() { Dummy2 = new Dummy2() },
            };
        }

        private Task OnInvalidSubmit1(EditContext context)
        {
            Trace.Log("OnInvalidSubmit 回调委托: 验证未通过");
            return Task.CompletedTask;
        }

        private async Task OnValidSubmit1(EditContext context)
        {
            await Task.Delay(1000);
            Trace.Log("OnValidSubmit 回调委托: 验证通过");
        }

        private async Task OnValidSubmit(EditContext context)
        {
            Trace2.Log("OnValidSubmit 回调委托: Starting ...");
            await Task.Delay(3000);
            Trace2.Log("OnValidSubmit 回调委托: Done!");
        }

        private Task OnInvalidSubmit(EditContext context)
        {
            Trace2.Log("OnInvalidSubmit 回调委托");
            return Task.CompletedTask;
        }

        private Task OnInvalidSubmitAddress(EditContext context)
        {
            Trace3.Log("OnInvalidSubmit 回调委托");
            return Task.CompletedTask;
        }

        private Task OnInvalidComplexModel(EditContext context)
        {
            Trace4.Log("OnInvalidSubmit 回调委托");
            return Task.CompletedTask;
        }

        private Task OnValidComplexModel(EditContext context)
        {
            Trace4.Log("OnValidSubmit 回调委托");
            ComplexForm.SetError("Dummy.Dummy2.Name", "数据库中已存在");
            return Task.CompletedTask;
        }

        private Task OnValidSetError(EditContext context)
        {
            FooForm.SetError<Foo>(f => f.Name, "数据库中已存在");
            return Task.CompletedTask;
        }

        #region 动态更改表单内验证组件
        [NotNull]
        private BlockLogger? Trace5 { get; set; }

        private bool ShowAddress { get; set; }

        private Foo DynamicModel { get; set; } = new Foo();

        private Task OnInvalidDynamicModel(EditContext context)
        {
            Trace5.Log("OnInvalidSubmit 回调委托");
            return Task.CompletedTask;
        }

        private Task OnValidDynamicModel(EditContext context)
        {
            Trace5.Log("OnValidSubmit 回调委托");
            return Task.CompletedTask;
        }

        private void OnValidateChange()
        {
            ShowAddress = true;
        }

        private void OnValidateReset()
        {
            ShowAddress = false;
        }
        #endregion

        private class ComplexFoo : Foo
        {
            [NotNull]
            public Dummy1? Dummy { get; set; }
        }

        private class Dummy1
        {
            [NotNull]
            public Dummy2? Dummy2 { get; set; }
        }

        private class Dummy2
        {
            [Required]
            public string? Name { get; set; }
        }

        #region 参数说明
        private static IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
        {
            // TODO: 移动到数据库中
            new AttributeItem() {
                Name = "Model",
                Description = "表单组件绑定的数据模型,必填属性",
                Type = "object",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "ValidateAllProperties",
                Description = "是否检查所有字段",
                Type = "bool",
                ValueList = "true/false",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "ShowRequiredMark",
                Description = "表单内必填项是否显示 * 标记",
                Type = "bool",
                ValueList = "true/false",
                DefaultValue = "true"
            },
            new AttributeItem() {
                Name = "ChildContent",
                Description = "子组件模板实例",
                Type = "RenderFragment",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "OnValidSubmit",
                Description = "表单提交时数据合规检查通过时的回调委托",
                Type = "EventCallback<EditContext>",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "OnInvalidSubmit",
                Description = "表单提交时数据合规检查未通过时的回调委托",
                Type = "EventCallback<EditContext>",
                ValueList = " — ",
                DefaultValue = " — "
            }
        };

        /// <summary>
        /// 获得事件方法
        /// </summary>
        /// <returns></returns>
        private static IEnumerable<MethodItem> GetMethods() => new MethodItem[]
        {
            new MethodItem()
            {
                Name = "SetError",
                Description="设置验证失败方法",
                Parameters ="PropertyName, ErrorMessage",
                ReturnValue = " — "
            }
        };
        #endregion
    }
}

B 站相关视频链接

[传送门]

交流群

QQ Group:BootstrapAdmin & Blazor 795206915( Full) 675147445 Welcome to join the group discussion
Themes
Bootstrap
Ant Design (完善中)
Bluma (完善中)
LayUI (完善中)
Motronic (已集成)
An error has occurred. This application may no longer respond until reloaded. Reload