如何从自定义剃刀组件公开 Blazorise TextEdit 的现有 @bind- 属性

问题描述

我是 Blazor 的新手（和 Blazorise 组件），目前，我有以下代码（所有这些都是 Blazorise 包中的组件）：

<Validation>
    <Field>
        <FieldLabel>Name</FieldLabel>
        <TextEdit Placeholder="Enter your name here"
                  @bind-Text="@DataRecord.Person.Name"
                  ReadOnly="false"
                  disabled="false">
            <Feedback>
                <FieldHelp>A valid name will be 3-100 characters long.</FieldHelp>
                <ValidationError />
            </Feedback>
        </TextEdit>
    </Field>
</Validation>

并且上面的代码将根据我拥有的字段数量在页面内重复多次...

所以我尝试创建一个名为 <ValidatedTextEdit> 的自定义剃刀组件，其中包含以下代码：

<Validation>
    <Field>
        <FieldLabel>@FieldLabelText</FieldLabel>
        <TextEdit Placeholder="@FieldplaceholderText"
                  @bind-Text="@FieldDataSource"
                  ReadOnly="@IsFieldReadOnly"
                  disabled="@IsFielddisabled">
            <Feedback>
                <FieldHelp>@FieldHelpText</FieldHelp>
                <ValidationError />
            </Feedback>
        </TextEdit>
    </Field>
</Validation>

@code {
    [Parameter] public string FieldLabelText { get; set; } = "";
    [Parameter] public string FieldplaceholderText { get; set; } = "";
    [Parameter] public string FieldHelpText { get; set; } = "";
    [Parameter] public bool IsFieldReadOnly { get; set; } = false;
    [Parameter] public bool IsFielddisabled { get; set; } = false;
    
    protected string _fieldDataSource;

    [Parameter]
    public string FieldDataSource
    {
        get => _fieldDataSource;
        set
        {
            if (_fieldDataSource == value) return;
            _fieldDataSource = value;
            FieldDataSourceChanged.InvokeAsync(value);
        }
    }

    [Parameter]
    public EventCallback<string> FieldDataSourceChanged { get; set; }
}

我希望像这样使用 <ValidatedTextEdit>：

<ValidatedTextEdit FieldLabelText="Name"
                   FieldplaceholderText="Enter your name here"
                   @bind-FieldDataSource="@DataRecord.Person.Name"
                   FieldHelpText="A valid name will be 3-100 characters long."
                   IsFieldReadOnly="false"
                   IsFielddisabled="false"/>

现在的问题是，当数据存储在数据库中时，<Validation>和<ValidationError />似乎都不起作用......它不会显示任何错误......?>

我目前正在使用 VS2019、Blazor、EF Core 和 Blazorise。

提前致谢！！！

解决方法

您缺少 TextExpression。需要它，以便 Blazor 可以传递有关绑定字段的信息。

<Validation>
    <Field>
        <FieldLabel>@FieldLabelText</FieldLabel>
        <TextEdit Placeholder="@FieldPlaceholderText"
                  Text="@FieldDataSource"
                  TextChanged="@FieldDataSourceChanged"
                  TextExpression="@FieldDataSourceExpression"
                  ReadOnly="@IsFieldReadOnly"
                  Disabled="@IsFieldDisabled">
            <Feedback>
                <FieldHelp>@FieldHelpText</FieldHelp>
                <ValidationError />
            </Feedback>
        </TextEdit>
    </Field>
</Validation>
@code {
    [Parameter] public string FieldLabelText { get; set; } = "";
    [Parameter] public string FieldPlaceholderText { get; set; } = "";
    [Parameter] public string FieldHelpText { get; set; } = "";
    [Parameter] public bool IsFieldReadOnly { get; set; } = false;
    [Parameter] public bool IsFieldDisabled { get; set; } = false;
    
    protected string _fieldDataSource;

    [Parameter]
    public string FieldDataSource
    {
        get => _fieldDataSource;
        set
        {
            if (_fieldDataSource == value) return;
            _fieldDataSource = value;
            FieldDataSourceChanged.InvokeAsync(value);
        }
    }

    [Parameter] public EventCallback<string> FieldDataSourceChanged { get; set; }
    [Parameter] public Expression<Func<string>> FieldDataSourceExpression { get; set; }
}