locked
Wrapping InputBase Types and Data Binding RRS feed

  • Question

  • User923497478 posted

    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.

    Thursday, February 27, 2020 4:08 PM

All replies

  • User-474980206 posted

    you might have more luck in the blazor forum.

    Thursday, February 27, 2020 6:40 PM
  • User923497478 posted

    Thanks, have posted over there also.

    Friday, February 28, 2020 10:19 AM