How to validate items in a combo box

[chris johansson]

If I have a combo box with values that allows filtering. I can type in basically anything for the filter instead of selecting something in the list.  I then click off the combo box thus leaving the junk i typed in for the filter. Just wondering for validation, the value is now junk, before I commit to my database I need to check if its a valid value since the field is editable for a filter/value in ValueChange event.

Is there a better way for combo box validation?

[Sureshkumar P]

Hi Chris, 

 

Greetings from Syncfusion support.

 

We can validate the combobox component using EditForm validation. Please find the code example below. Also, we have used AllowCustom property value as false to overcome the irrelevant data entry into the component textbox. 

 

Please find the code example here:  

@using Syncfusion.Blazor.DropDowns 

@using System.ComponentModel.DataAnnotations 

 

<EditForm EditContext="@editContext"> 

    <DataAnnotationsValidator /> 

    <div class="form-group"> 

        <SfComboBox TValue="string" TItem="Countries" AllowCustom="false" Placeholder="e.g. Australia" @bind-Value="@model.ComboVal" DataSource="@Country"> 

            <ComboBoxFieldSettings Value="Name"></ComboBoxFieldSettings> 

        </SfComboBox> 

        <ValidationMessage For="() => model.ComboVal" /> 

    </div> 

    <button>Submit</button> 

</EditForm> 

 

@code { 

 

    public class Countries 

    { 

        public string Name { get; set; } 

 

        public int? Code { get; set; } 

    } 

 

    List<Countries> Country = new List<Countries> 

{ 

        new Countries() { Name = "TestCountry1", Code = 11 }, 

        new Countries() { Name = "TestCountry2", Code = 12 }, 

        new Countries() { Name ="TestCountry3", Code = 13 }, 

        new Countries() { Name = "TestCountry4", Code = 14 }, 

    }; 

 

    private Test model; 

    private EditContext editContext; 

    protected override void OnInitialized() 

    { 

        model = new Test(); 

        editContext = new EditContext(model); 

    } 

    public class Test 

    { 

        [Required] 

        public string ComboVal { get; set; } 

    } 

 

} 

 

If we misunderstood your requirement. please revert us with any pictorial or video demonstration of your requirement. this detail will help us to provide exact solution as earlier as possible. 

 

Regards, 

Sureshkumar P 

 

[chris johansson]

Ok thanks for the reply.

I applied allowcustom to false to the combo boxes outside the grid and inside the grid.

I found some weird functionality though, When you enter in junk in Customer Account field and it finds nothing and then click off.  It blanks out.  I guess this is the intended functionality since nothing was found, could be nice to revert back to the original value since nothing was validated.

In the combo box in the grid it works a bit different.  I first select a record and type in junk and then click off. It blanks it out and then continues to blank out every other row in that column after that.  I don't think that should be happening.

Video attached.

Attachment: GridBlanking_4368c5bb.zip

[Sureshkumar P]

Hi Chris, 

 

Thanks for your update. 

 

When set the allowcustom to false. The given invalid value has been cleared and the value is set to null. This is the default behavior of our component. if you want to set the previous selected value when you enter the invalid value to the component, then you need to handle the functionality using change event. 

 

 

Regards, 

Sureshkumar P