I'm trying to wrap derivatives of InputBase components in my own custom component to suit my application.
However, I don't seem to be able to get the data-binding to work with the property values always coming back as null.
So, I have the following code:
InputTextField.razor
<Field Label="@Label" ColumnSpan="6"><EditContent><InputText @bind-Value="@Value" class="main-element form-control"></InputText></EditContent><DetailContent> @Value</DetailContent></Field> @code { [Parameter] public string Label { get; set; } [Parameter] public string Value { get; set; } [Parameter] public EventCallback<string> ValueChanged { get; set; } }
Field.razor
@inject NavigationManager _navManager<div class="cell col-sm-@ColumnSpan form-group" @onmouseover="ShowInlineEdit" @onmouseout="HideInlineEdit"><a href="javascript:;" class="pull-right inline-cancel-link @(Mode == FieldMode.InlineEdit ? "" : "hidden")" @onclick="SetDetailMode" @onclick:preventDefault>Cancel</a><a href="javascript:;" class="pull-right inline-save-link @(Mode == FieldMode.InlineEdit ? "" : "hidden")">Update</a> @if (Mode == FieldMode.Detail) { <a href="" class="pull-right inline-edit-link @InlineEditCss" @onclick="SetInlineEditMode" @onclick:preventDefault><span class="fas fa-pencil-alt"></span></a> }<label class="control-label"><span class="label-text">@Label</span></label><div class="field"> @if (Mode == FieldMode.Detail) { @DetailContent } else { @EditContent }</div></div> @code { [Parameter] public string Label { get;set; } [Parameter] public int ColumnSpan { get; set; } = 6; [Parameter] public bool IsRequired { get; set; } public FieldMode Mode { get; set; } = FieldMode.Detail; [Parameter] public RenderFragment EditContent { get; set; } [Parameter] public RenderFragment DetailContent { get; set; } private string InlineEditCss = "hidden"; protected override void OnInitialized() { base.OnInitialized(); var url = _navManager.Uri; this.Mode = FieldMode.Detail; if (url.Contains("Create") || url.Contains("Edit")) { this.Mode = FieldMode.CreateOrEdit; } } void SetInlineEditMode() { this.Mode = FieldMode.InlineEdit; StateHasChanged(); } void SetDetailMode() { this.Mode = FieldMode.Detail; StateHasChanged(); } void ShowInlineEdit() { InlineEditCss = ""; StateHasChanged(); } void HideInlineEdit() { InlineEditCss = "hidden"; StateHasChanged(); } }
And I come to use it inside an EditForm as follows:
<InputTextField Label="Name" @bind-Value="@account.Name"></InputTextField>
However, when I hit a breakpoint inside the OnValidSubmit handler for the EditForm, the "Name" field is null.
If I change back to a standard <InputText> component, the data binding works just fine.
Can anyone help, please?
UPDATE
If I check the EditContext within the OnValidSubmit event callback, the "_fieldStates" sees the value of the "Name" property but its just not reflected in the bound Model.