如何从自定义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可以传递有关bind字段的信息。

<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; }
}