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

Question

如何绑定到 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 /> 似乎都不起作用...它不会显示任何错误...

为什么？

Answer 1

您缺少 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; }
}

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

How do I expose the existing @bind- property of Blazorise TextEdit from a custom razor component

c#

data-binding

blazor

blazorise

代码部分