Closed etcircle closed 4 years ago
I'm having the same issue, tried coping out side of the EditForm, then it just runs
I was having the same problem so I looked into this. Autocomplete creates a text field:
<MatTextField Icon="@Icon" OnFocus="@OpenPopup" HideClearButton="true" FullWidth="@FullWidth" OnFocusOut="@ClosePopup" Label="@Label" Value=@StringValue OnInput=@OnValueChanged Outlined="@Outlined" Attributes="@Attributes" Id="@Id"></MatTextField>
MatTextField
needs a ValueExpression
when EditContext
is set (which is a cascading value from EditForm
), but there is no value binding for the mat text field within MatAutoComplete
.
Currently BaseMatAutocomplete
inherits from BaseMatDomComponent
, which is not an input component so therefore doesn't support EditContext/ValueExpression.
I made the following changes locally but I'm not sure if this is the right way to fix it:
BaseMatAutocomplete
now inherits from BaseMatInputComponent<string>
StringValue
is changed to just Value
because it is inherited from the input componentValue
is changed to DefaultValue
because it obviously needed a new name@bind-Value="Value"
is added to the text field. Alternatively ValidationDisabled
could be made a cascading valueOnTextChanged
is now OnValueChanged
OnValueChanged
is now OnDefaultValueChanged
ValueChanged
is invoked in the set for DefaultValue
so that the validation for Value updates properly when an element is clickedJust these changes get rid of the error but validation in the text field doesn't work.
I added @bind-Value="Value"
but "Value" doesn't have the same validation rules as whatever the value passed into the autocomplete component was. I'm not sure of the best way to fix this, ideas? My current solution is turning off validation in the text field and adding custom css, but that's a bad way to do it.
I'm having the same issue. Unfortunately, I cannot move MatAutocomplete outside EditForm. I'm yet to come up with a solution to this challenge.
Make a new component, named something like "MatAutocompleteForm.razor"
@namespace MatBlazor
@typeparam ItemType
@inherits BaseMatAutocomplete<ItemType>
@using System.Collections;
<div class="@WrapperClassMapper.Class">
<MatTextField Icon="@Icon" OnFocus="@OpenPopup" HideClearButton="true" FullWidth="@FullWidth" OnFocusOut="@ClosePopup" Label="@Label" Value=@StringValue OnInput=@OnValueChanged OnKeyDown="@OnKeyDown" Outlined="@Outlined" Attributes="@Attributes" Id="@Id" ValueExpression="@(() => _dummyVal)"></MatTextField>
@if (IsShowingClearButton)
{
<div class="mat-autocomplete-clearbutton">
<MatIconButton Icon="clear" OnMouseDown="@ClearText"></MatIconButton>
</div>
}
@if (Collection != null && IsOpened)
{
<div class="mat-autocomplete-popup">
<MatList @ref="ListRef" SingleSelection="true">
@foreach (var elementWrapper in GetFilteredCollection(StringValue))
{
<MatListItem OnMouseDown="@((e) => ItemClicked(elementWrapper.Element))">
@if (ItemTemplate != null)
{
@ItemTemplate(elementWrapper.Element)
}
else
{
<MatListItemText>@(elementWrapper.StringValue)</MatListItemText>
}
</MatListItem>
}
</MatList>
</div>
}
</div>
@code {
private string _dummyVal { get; set; }
}
Here is what I used: https://docs.telerik.com/blazor-ui/knowledge-base/value-changed-validation-model
I'm having the same issue, Autocomplete doesn't seem to work within a form with EditForm validation.. Unfortunately, I cannot move MatAutocomplete outside EditForm. Somebody fix it ? you ave a solution ? thx
Merged fix into develop branch.
The Autocomplete doesn't seem to work within a form with EditForm validation.