DropdownList programetically selection not working using FORM API

[Mukesh Majethia]

trying to create wrapper component on ejs-dropdownlist using FormAPI to make it compatible with Reactive Forms.

But when I try to make default selection using patchValue method of reactive form then dropdownlist not select the value.

Also attach sample code for your reference.

Attachment: Syncfusion_question_bfcfa46c.zip

[Yohapuja Selvakumaran]

Hi Mukesk Majethia,

Thank you for reaching out to us. We have validated your requirement and created a sample to address the reported issue of updating the value of a DropDownList using patchValue. Below is the detailed code snippet and a sample link for your reference.

Code Snippet:

 

  constructor(private fb: FormBuilder) {

    this.createForm();

  }

  createForm(): void {

    this.skillForm = this.fb.group({

      skillname: ['', Validators.required],

      sname: ['', Validators.required],

      smail: ['', [Validators.required, Validators.email]],

    });

    const data = {

      skillname: 'ActionScript',

      sname: 'John Doe',

      smail: '[email protected]',

    };

    this.skillForm.patchValue(data);

  }

 

 

Here, a data object is created with values to be patched into the form. The patchValue method is used to update the form controls with the provided data.

Kindly refer to the below sample,

Sample: https://stackblitz.com/edit/angular-3p7tvl-pmbich?file=src%2Fapp.component.ts,src%2Fapp.component.html

This sample demonstrates how the DropDownList and other form controls are updated using the patchValue method.

Regards,

Yohapuja S

[Mukesh Majethia]

Hello Team,

Thanks for your reply, but my scenario is different.

I'm trying to create a wrapper component on ejs-dropdownlist and using Form API to connect with the Reactive forms.

When using Reactive form directly with the component it is working, but when I make wrapper and using Form API to update the value in dropdown component then it is not working.

if you want, I can provide a sample code for wrapper component.

[Mukesh Majethia]

Hello Team,

Kindly check reply and provide your suggestion.

[Yohapuja Selvakumaran]

Hi Mukesk Majethia,

Thank you for getting back to us, and we apologize for the delay in our response. We understand your concern regarding rendering the DropDownList inside a wrapper element. We've tested this scenario by rendering the DropDownList inside a <span> element. But the default selection using patch value is working as expected. Please check the sample provided below for reference:

Sample:  https://stackblitz.com/edit/angular-3p7tvl-4ufttb?file=src%2Fapp.component.ts,src%2Fapp.component.html

To assist you more effectively, could you please clarify what you mean by the "wrapper element" and how you're implementing the DropDownList within it? Sharing these details will help us replicate the reported issue accurately and provide you with a more precise solution.

If there's been any misunderstanding of your scenario, we kindly request you to share a sample or code snippet that demonstrates your specific setup. This will help us replicate the issue accurately and provide a more precise solution.

Thank you for your patience and understanding. We're here to help and look forward to resolving this for you.

Regards,

Yohapuja S