Text property is not displayed on object load

Question

Hi, this is my DropDownList component inside a reactive form:

<ejs-dropdownlist name="idRegistrationRate" formControlName="idRegistrationRate"
                    [dataSource]="registrationRatesList" placeholder="Tasa de Matriculación *"
                    [fields]="{text: 'nombre', value: 'id'}" floatLabelType="Auto" required
                    [allowFiltering]="true" cssClass="{{f.idRegistrationRate.touched && !f.idRegistrationRate.valid ? 'e-error' : 'e-success'}}">
ejs-dropdownlist>

and this is how I'm loading and updating controls:

  async ngOnInit(): Promise<void> {
    this.id = this.activatedRoute.snapshot.params.id;

    this.form = this.createForm();

    if (this.id > 0) {
      await this.loadData();
      this.tittle = this.customer.empresa;
    }else{
      this.tittle = "(Nuevo)";
    }

    await this.loadRegistrationRates();

    this.form.patchValue(this.customer);
  }

but the control is not displaying selected option when customer is loaded (this.customer.idRegistrationRate is the property coming from customer):

If I select an option, it's working fine:

Any ideas about my problem?

Regards

Jose

Ponmani Murugaiyan · Answer

Hi Jose, 

We checked your reported query, based on your provided information we suspect that you would like to set predefined value to Dropdownlist component. We suggest you to set as like below code snippet to display the text based on id. 





constructor(private fb: FormBuilder) { 
  this.createForm(); 
} 
 
createForm(): void { 
  this.skillForm = this.fb.group({ 
    action: ['2', Validators.required], 
  }); 
} 

Sample: https://stackblitz.com/edit/angular-ztgk23-xbc3rz?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. So, please make sure to update the value property after the data is assigned to datasource property. 

Kindly check with the above suggestion meets your requirement. If you need further assistance, please get back us with additional details to check and provide you additional details. 

Regards, 
Ponmani M

Jose Luis Garcia · Answer

Hi Ponmani,Thanks a lot for your quick response.If you check the ngOnInit method, the value is set after loading from the server the list of registration rates.After loading the list, I update the form controls with their values (form patch method).If I inspect the control in runtime, I can see that the value has been assigned correctly, but the text is not displayed. RegardsJose

Ponmani Murugaiyan · Answer

Hi Jose, 

We would like to inform you that, if you are updated with game (mapped with text field ) will not update the pre-selected value as per your reported scenario. You should map the corresponding id (mapped with value field) to update the value property as like below code snippet 

Sample: https://stackblitz.com/edit/angular-ztgk23-xbc3rz?file=app.component.ts 





public actionFields: Object = { text: 'Game', value: 'id' }; 
public actionData: { [key: string]: Object }[] = [ 
{ id: '1', Game: 'Proceed' }, 
{ id: '2', Game: 'Triage' }, 
{ id: '3', Game: 'Forward' }, 
{ id: '4', Game: 'Bounce' }, 
]; 
 
createForm(): void { 
    this.skillForm = this.fb.group({ 
      action: ['2', Validators.required], 
    }); 
  } 

Kindly check with the above suggestion, if issue still exists in your end. We request you to share the issue replicating sample or try to replicate in the below attached sample to investigate further in our end.  

Regards, 
Ponmani M

Jose Luis Garcia · Answer

Hi Ponmani,I'm updating the id of the object, as you can see in previous screenshot (value: 4), but to be sure, after getting datasource elements from server, I've tried to set the value with (its a reactive form):this.f.idRegistrationRate.setValue(4);but with the same result, no text is set in the control.I'm sure it's my mistake, but I can't figure out where the error lies.RegardsJose

Ponmani Murugaiyan · Answer

Hi Jose, 

We suggest you to set the value to the component in setValue method as like below code snippet to get rid of the reported issue. Please find the sample below for reference 





onCreate() { 
     this.skillForm.controls.skillname.setValue(4); 
} 

Sample: https://stackblitz.com/edit/angular-nscm4b-3xx5ej?file=app.component.ts 

Regards, 
Ponmani M

Jose Luis Garcia · Answer

Hi Ponmani,That is precisely what I am doing with "this.f.idRegistrationRate.setValue(4);" (this.f is just a shortcut of "this.form.controls").To get out of doubt I have created a simple test with a button that when you press it assigns a value to the control with this code:  public onClickSetDrop(): void {    this.form.controls.idRegistrationRate.setValue(7);  }This simple test fails. When I press the button, value is assigned to dropdownlist

(I can see that inspecting the control)

but no text is displayed.Do I have to refresh the control after assigning the value?RegardsJose

Jose Luis Garcia · Answer

Hi Ponmani,I've found my mistake...I was trying to assign the id as string and it's a number. That's the problem.I'm sorry to have bothered you with my mistake.RegardsJose

Ponmani Murugaiyan · Answer

Hi Jose, 

We are glad that to hear that the issue has been resolved. Please get back us if you need further assistance. 

Regards, 
Ponmani M