Wrapping InputBase Types and Data Binding

Reply

kevinwebster...

Member

1 Points

31 Posts

Wrapping InputBase Types and Data Binding

Feb 27, 2020 04:08 PM|kevinwebster83|LINK

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.