Clear non-listed value in combo box

[Masoud Moghaddari]

Hi there,

When using combo box component in a form, if user selects an option from the drop down menu then my desired value will be set properly and the form will submit the correct value.

But if user types a new value and not select it from the drop down, the typed value will be submitted in the form.

How can I prevent that? I want only the values from the drop down list to be submitted and other values be set to null or empty for instance.

Best Regards

Masoud Moghaddari

[Sevvandhi Nagulan]

Hi Masoud,  

 

Greetings from Syncfusion support. 

We have checked the reported requirement. In ComboBox allowCustom property is true by default. So if have type some value that not available in the dataSource, then it will be added to the dataSource. So we suggest disable the allowCustom value property. Kindly refer the below code, 

   <form v-on: submit="sub"> 

        <div> 

            <ejs-combobox id='dropdownlist' : dataSource='sportsData' :allowCustom ='false' ></ejs-combobox> 

        </div> 

        <div> 

            <input type="submit" id='btn' value="submit" /> 

        </div> 

        </form > 

 

  methods: { 

        sub: function(event) { 

            console.log(event.currentTarget.querySelector('input').value); 

        } 

    } 

Please find the sample and UG documentation link below, 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/quickstart-863039358 

UG Link: https://ej2.syncfusion.com/vue/documentation/api/combo-box#allowcustom 

 

Regards, 

Sevvandhi N 

[Masoud Moghaddari]

Hi Sevvandhi,

Thank you, the solution you provided works great.

Best Regards

Masoud Moghaddari

[Sevvandhi Nagulan]

Hi Masoud, 

  

Most welcome. Please let us know if you need any other further assistance on this. 

  

Regards, 

Sevvandhi N