MatBlazor.MatTextField requires a value for the 'ValueExpression' parameter. [1.5.3]

[djinnet]

In the newest update 1.5.3, I got this error "MatBlazor.MatTextField requires a value for the 'ValueExpression' parameter. Normally this is provided automatically when using 'bind-Value'." The bug show up whenever an component are using textfield.

The bug should only show if MatTextField do not contain an value.

I am using basic authorizeView with EditForm in my code, and as you can see, MatTextField do have bind-values which means they contains values, so I am guessing the cause must be related to ValueExpression in the BaseMatInputComponent. Because the error message only show up if ValueExpression is null.

The code is working fine in 1.5.2 update.

/@ Template Admin authorize blazor code. The AdminObject contains name String, startTime DateTime, endTime DateTime. Save is an function that saved into an data source such as database with Entity framework. @/
<AuthorizeView Roles="Admin" Context="AuthContext">
    <Authorized>
	 <EditForm Model="AdminObject" OnValidSubmit="@(async () => await Save())">
		 <div class="container-fluid">
			<div class="row">
				<DataAnnotationsValidator />
				<ValidationSummary />
			</div>

			<div class="row">
				<div class="form-group">
					<div class="col-md-12">
						<label for="Name" class="control-label">Name</label>
						<MatTextField @bind-Value="AdminObject.Name" Label="Name" ></MatTextField>
					</div>
				</div>
			</div>

			<div class="row">
				<div class="col-md-6">
					<label asp-for="Starttime" class="control-label">Start time</label>
					<MatDatePicker @bind-Value="AdminObject.startTime"></MatDatePicker>
					<MatButton OnClick="@(_ =>{AdminObject.startTime = null; this.StateHasChanged();})">Empty</MatButton>
				</div>

				<div class="col-md-6 ml-auto">
					<label asp-for="Endtime" class="control-label">End time</label>
					<MatDatePicker @bind-Value="AdminObject.endTime"></MatDatePicker>
					<MatButton OnClick="@(_ =>{AdminObject.endTime = null; this.StateHasChanged();})">Empty</MatButton>
				</div>
			</div>
			<button type="submit" class="btn btn-block btn-info">Save</button>
		</div>
	 </EditForm>
	</Authorized>
    <NotAuthorized>
        You do not have Admin Permission.
    </NotAuthorized>
</AuthorizeView>

I hope someone can find an fix for that bug, because it's currently breaking a lot of components.

[SamProf]

I will check today

[nagytam]

I upgraded to the latest MatBlazor 1.5.3 version as well, and immediately experienced the broken TextField component, as described above. I needed to downgrade to 1.5.2 again. Looking forward to the fixed version.

[SamProf]

Hey! I have temporary fixed this problem, Can you test?

https://www.nuget.org/packages/MatBlazor/1.5.4

[djinnet]

I can confirm the issue is gone in 1.5.4.
Great job! I noticed that the datetimepicker component need to refresh once after the update. After that, it's working as intended, so I am guessing that the old datepicker component must have been saved in the cache.

I have tested with restart the project to see if I need to refresh again, which to my surprise, I don't need to. But it might be worth to note it down anyway, in case people are experienced the cache issue.

[gitbugreport]

This issue is back in version 1.6

[gitbugreport]

Occurs when some MatBlazor components are used inside EditForm. Example:

<EditForm Model="@order">
        <MatAutocomplete Label="Benefit name"
                            Outlined="true"
                            ItemType="Benefit"
                            Collection="@benefits"
                            CustomStringSelector="@(s => $"{s.BenefitName} | {s.Points}")"
                            @bind-Value="order.Benefit"
                            ShowClearButton="true"
                            NumberOfElementsInPopup="10"
                            FullWidth="true">
        </MatAutocomplete>
        <MatButton Label="Add" @onclick="AssignBenefitAsync" />
</EditForm>

warn: Microsoft.AspNetCore.Components.Web.Rendering.RemoteRenderer[100] Unhandled exception rendering component: MatBlazor.MatTextField requires a value for the 'ValueExpression' parameter. Normally this is provided automatically when using 'bind-Value'. System.InvalidOperationException: MatBlazor.MatTextField requires a value for the 'ValueExpression' parameter. Normally this is provided automatically when using 'bind-Value'. at MatBlazor.BaseMatInputComponent1.SetParametersAsync(ParameterView parameters) at Microsoft.AspNetCore.Components.Rendering.ComponentState.SetDirectParameters(ParameterView parameters) at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InitializeNewComponentFrame(DiffContext& diffContext, Int32 frameIndex) at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InitializeNewSubtree(DiffContext& diffContext, Int32 frameIndex) at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InsertNewFrame(DiffContext& diffContext, Int32 newFrameIndex) at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.AppendDiffEntriesForRange(DiffContext& diffContext, Int32 oldStartIndex, Int32 oldEndIndexExcl, Int32 newStartIndex, Int32 newEndIndexExcl) at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.ComputeDiff(Renderer renderer, RenderBatchBuilder batchBuilder, Int32 componentId, ArrayRange1 oldTree, ArrayRange`1 newTree) at Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch(RenderBatchBuilder batchBuilder, RenderFragment renderFragment) at Microsoft.AspNetCore.Components.Rendering.Renderer.RenderInExistingBatch(RenderQueueEntry renderQueueEntry) at Microsoft.AspNetCore.Components.Rendering.Renderer.ProcessRenderQueue() warn: Microsoft.AspNetCore.Components.Server.ComponentHub[3]

[ZimM-LostPolygon]

Any solution? Still happens to me in the latest version UPD: the problem was that I used @bind-value instead of @bind-Value. Easy to miss.

[SeppPenner]

This is still present in the latest version if you use (In my case with the Checkbox)

Value="@SomeValue" ValueChanged="@(e => ValueChanged(e))"

together...

[tkennedy13]

I'm having the same problem using MatAutocompleteList

<MatAutocompleteList Items="@options" TItem="string" Label="Country" />

private string [] options = new []
{
    "One",
    "Two",
    "Three"
};

I also tried

<MatAutocompleteList @bind-Value="@blah" Items="@options" TItem="string" Label="Pick one" />

public string blah { get; set; }

I'm using MatBlazor 2.0.0 installed from Nuget.

[katiep23]

I'm having same issue, too with MatSelect.

[Panzerfury]

I'm having this issue with MatSelectValue and EditForm in 2.1.0 Anyone having a workaround for this?

[GriesmarThomas]

Hello, we have the same issue with MatCheckbox... (by using Value and ValueChanged attributes...

Meanwhile, when we deleted the <EditForm> tag that was surrounding our components, it solved the problem. The MatChackbox element could not be bound to the form.

[katiep23]

Still happening with MatSelect's in latest release.

[katiep23]

Here is workaround approach I used: https://docs.telerik.com/blazor-ui/knowledge-base/value-changed-validation-model

[enkodellc]

@tkennedy13 the issue should be resolve with the latest code in "develop" for AutoComplete. @sandrohanea can you take a look and see if your solution will work here?

[sandrohanea]

Indeed, it should be fixed for AutoComplete but the fix was isolated there. If the @bind is not used on the other elements, the exception will still be thrown but as far as I understood from @SamProf it is intended if you don't provide a ValueExpression and you're not using @bind-Value.

[fededim]

I am experiencing the same issue on a MatSelect with latest package 2.7.0 (I need to realize 2 cascading matselects, e.g. the selected value from the first matselect updates the second matselect)...here follows my code...does anybody know a workaround ?

  <div class="mat-layout-grid">
       <div class="mat-layout-grid-inner">
           <div class="mat-layout-grid-cell mat-layout-grid-cell-span-6">
               <MatSelect Label="@strings.Authority" ValueChanged="(Int64? nv)=>OnChangeAuthority(nv)" >
                   @if (Authorities != null)
                       @foreach (var au in Authorities)
                       {
                           <MatOption TValue="Int64?" Value="@au.Id">@au.Name</MatOption>
                       }
               </MatSelect>
               <ValidationMessage For="@(() => model.AuthorityId)" />
           </div>
           <div class="mat-layout-grid-cell mat-layout-grid-cell-span-6">
               <MatSelect Label="@strings.CountPath" @bind-Value="@model.CountPathId">
                   @if (CountPaths != null)
                       @foreach (var cp in CountPaths)
                       {
                           <MatOption TValue="Int64?" Value="@cp.Id">@cp.Name</MatOption>
                       }
               </MatSelect>
               <ValidationMessage For="@(() => model.CountPathId)" />
           </div>

code behind

       protected async Task OnChangeAuthority(Int64? newValue)
        {
            CountPaths = await Cl.GetAllCountPaths(newValue);
        }

Error:

crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: MatBlazor.MatSelect`1[System.Int64] requires a value for the 'ValueExpression' parameter. Normally this is provided automatically when using 'bind-Value'.
System.InvalidOperationException: MatBlazor.MatSelect`1[System.Int64] requires a value for the 'ValueExpression' parameter. Normally this is provided automatically when using 'bind-Value'.
  at MatBlazor.BaseMatInputComponent`1[T].SetParametersAsync (Microsoft.AspNetCore.Components.ParameterView parameters) <0x33c46a0 + 0x0005c> in <filename unknown>:0 
  at Microsoft.AspNetCore.Components.Rendering.ComponentState.SetDirectParameters (Microsoft.AspNetCore.Components.ParameterView parameters) <0x2e16e60 + 0x0007c> in <filename unknown>:0 
  at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.UpdateRetainedChildComponent (Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder+DiffContext& diffContext, System.Int32 oldComponentIndex, System.Int32 newComponentIndex) <0x31681a8 + 0x000e2> in <filename unknown>:0 
  at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.AppendDiffEntriesForFramesWithSameSequence (Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder+DiffContext& diffContext, System.Int32 oldFrameIndex, System.Int32 newFrameIndex) <0x3162b48 + 0x0033a> in <filename unknown>:0 
  at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.AppendDiffEntriesForRange (Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder+DiffContext& diffContext, System.Int32 oldStartIndex, System.Int32 oldEndIndexExcl, System.Int32 newStartIndex, System.Int32 newEndIndexExcl) <0x2e38598 + 0x00428> in <filename unknown>:0 
  at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.AppendDiffEntriesForFramesWithSameSequence (Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder+DiffContext& diffContext, System.Int32 oldFrameIndex, System.Int32 newFrameIndex) <0x3162b48 + 0x002a2> in <filename unknown>:0 
  at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.AppendDiffEntriesForRange (Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder+DiffContext& diffContext, System.Int32 oldStartIndex, System.Int32 oldEndIndexExcl, System.Int32 newStartIndex, System.Int32 newEndIndexExcl) <0x2e38598 + 0x00428> in <filename unknown>:0 
  at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.AppendDiffEntriesForFramesWithSameSequence (Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder+DiffContext& diffContext, System.Int32 oldFrameIndex, System.Int32 newFrameIndex) <0x3162b48 + 0x002a2> in <filename unknown>:0 
  at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.AppendDiffEntriesForRange (Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder+DiffContext& diffContext, System.Int32 oldStartIndex, System.Int32 oldEndIndexExcl, System.Int32 newStartIndex, System.Int32 newEndIndexExcl) <0x2e38598 + 0x00428> in <filename unknown>:0 
  at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.AppendDiffEntriesForFramesWithSameSequence (Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder+DiffContext& diffContext, System.Int32 oldFrameIndex, System.Int32 newFrameIndex) <0x3162b48 + 0x002a2> in <filename unknown>:0 
  at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.AppendDiffEntriesForRange (Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder+DiffContext& diffContext, System.Int32 oldStartIndex, System.Int32 oldEndIndexExcl, System.Int32 newStartIndex, System.Int32 newEndIndexExcl) <0x2e38598 + 0x00428> in <filename unknown>:0 
  at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.AppendDiffEntriesForFramesWithSameSequence (Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder+DiffContext& diffContext, System.Int32 oldFrameIndex, System.Int32 newFrameIndex) <0x3162b48 + 0x00312> in <filename unknown>:0 
  at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.AppendDiffEntriesForRange (Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder+DiffContext& diffContext, System.Int32 oldStartIndex, System.Int32 oldEndIndexExcl, System.Int32 newStartIndex, System.Int32 newEndIndexExcl) <0x2e38598 + 0x00428> in <filename unknown>:0 
  at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.ComputeDiff (Microsoft.AspNetCore.Components.RenderTree.Renderer renderer, Microsoft.AspNetCore.Components.Rendering.RenderBatchBuilder batchBuilder, System.Int32 componentId, Microsoft.AspNetCore.Components.RenderTree.ArrayRange`1[T] oldTree, Microsoft.AspNetCore.Components.RenderTree.ArrayRange`1[T] newTree) <0x2e2e678 + 0x00094> in <filename unknown>:0 
  at Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch (Microsoft.AspNetCore.Components.Rendering.RenderBatchBuilder batchBuilder, Microsoft.AspNetCore.Components.RenderFragment renderFragment) <0x2e26d68 + 0x000aa> in <filename unknown>:0 
  at Microsoft.AspNetCore.Components.RenderTree.Renderer.RenderInExistingBatch (Microsoft.AspNetCore.Components.Rendering.RenderQueueEntry renderQueueEntry) <0x2e26768 + 0x0004c> in <filename unknown>:0 
  at Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue () <0x2e23c68 + 0x00098> in <filename unknown>:0