Combobox default value and validation

[Walter Cook]

I want to be able to default this combobox with a value of 1, but have Proceed display in the form.

<ejs-combobox id='action' [dataSource]='actionData' formControlName="action"

        [placeholder]="actionText"  [fields]='actionFields' [autofill]='true'

        ></ejs-combobox>  

 public actionFields : Object = { text: 'action', value: 'id' };

  public actionText : string = "Action to take";

  public actionData: { [key: string]: Object }[] = [ { id: '1', Game: 'Proceed' },

  { id: '2', Game: 'Triage' }, { id: '3', Game: 'Reject - Forward' },{ id: '4', Game: 'Reject - Bounce Back' }];

I can’t seem to get it to display the text but store the value.

Further, 

Is there a property to warn the user for a “Not in List” or validate the entry? I can’t find one.

In the above example, a user could type “Fred” and move on. It appears as a valid entry but clearly is not and the user would have no idea.

Thanks in advance

[Ponmani Murugaiyan]

Hi Walter, 

Thanks for contacting Syncfusion support. 

Query1: I want to be able to default this combobox with a value of 1, but have Proceed display in the form. I can’t seem to get it to display the text but store the value. 

Based on your provided code snippet, you have bind fields property with ‘id’ and ‘action’. But in the datasource you have mapped with the fields ‘id’ and ‘Game’. So as per your code, the popup will be empty due to mismatch fields mapped in the datasource. Both fields property and datasource fields must be same as like below heighted code snippet to meet your requirement. 

public actionFields: Object = { text: 'Game', value: 'id' }; 

public actionText: string = 'Action to take'; 

public actionData: { [key: string]: Object }[] = [ 

    { id: '1', Game: 'Proceed' }, 

    { id: '2', Game: 'Triage' }, 

    { id: '3', Game: 'Reject - Forward' }, 

    { id: '4', Game: 'Reject - Bounce Back' } 

]; 

Sample: https://stackblitz.com/edit/angular-ztgk23?file=app.component.ts 

Query2: Is there a property to warn the user for a “Not in List” or validate the entry? I can’t find one. It appears as a valid entry but clearly is not and the user would have no idea. 

Please find the two possible solution to meet your requirement: 

1.By default, allowCustom property is enabled, so the component allows user defined value which does not exist in data source. You can disable this property, which prevent the user defined data which is not in datasource as per requirement.  

https://ej2.syncfusion.com/angular/documentation/api/combo-box#allowcustom 

2. You can notify to customer, if the typed value is not present in the  datasource using the template support. Please find the demo sample below for reference. 

https://ej2.syncfusion.com/angular/demos/#/material/combo-box/custom-value 

Regards, 

Ponmani M 

[Walter Cook]

Thank you for your replies. It's moving foward.

Query1:

I have everything matching and the list displays.

public actionFields : Object = { text: 'action', value: 'id' };

  public actionData: { [key: string]: Object }[] = [ { id: '1', action: 'Proceed' },

  { id: '2', action: 'Triage' }, { id: '3', action: 'Reject - Forward' },{ id: '4', action: 'Reject - Bounce Back' }];

What I want to be able to do is assign the value based on id. 

If I pass in "2", the combobox shows me 2, not "Triage".

Query 2:

Even in your example, yes it shows you the warning message, but you can still leave the control and the value persists. If you type in "Nonsense" and leave, it still shows "Nonsense". Yes it may not be bound to anything but it appears that the value has been accepted.
Is there a property that forces an acceptable value, not permitting you to leave until it has one?

Thanks

[Ponmani Murugaiyan]

Hi Walter, 

Thanks for the update. 

Queery1: What I want to be able to do is assign the value based on id. If I pass in "2", the Combobox shows me 2, not "Triage. 

 

Based on your provided information, we suspect that you would like to set predefined value to ComboBox component based on id. We suggest you to set as like below code snippet to display the text based on id. 

createForm(): void { 

    this.skillForm = this.fb.group({ 

      action: ['2', Validators.required] 

    }); 

  } 

Sample: https://stackblitz.com/edit/angular-ztgk23-6ndbgz?file=app.component.ts 

Also, we would like to know you that if the preselected value is updated to the component before the datasource property is updated. Then the provided Id for value property will search for corresponding text and if it is not found, will update the Id to the component as like your reported scenario. So, please make sure to update the value property after the data is assigned to datasource property. 

Query2: Is there a property that forces an acceptable value, not permitting you to leave until it has one? 

Yes, this can achieved by disabling the allowCustom property. If you type the text which is not in datasource, while focus out the typed value gets cleared out and with required error message. 

https://ej2.syncfusion.com/angular/documentation/api/combo-box#allowcustom  

<ejs-combobox formControlName="action" name="action" [allowCustom]=false [dataSource]='actionData'  

[placeholder]='autoreactiveplaceholder' [fields]='actionFields' floatLabelType='Auto'></ejs-combobox> 

 

<div *ngIf="skillForm.controls.action.invalid && skillForm.controls.action.touched" class="alert alert-danger"> 

<div *ngIf="skillForm.controls.action.errors.required"> Book Name is required.</div> 

Sample: https://stackblitz.com/edit/angular-ztgk23-whgv3y?file=app.component.ts 

Please get back us if you need further assistance. 

Regards, 

Ponmani M 

[Walter Cook]

That gets me close enough.

Thanks for all the help.

[Ponmani Murugaiyan]

Hi Walter, 

Welcome.  We always happy to assist you. 

Regards, 

Ponmani M