We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Not able to set default value when using Value Template and allowFiltering together

Consider the following code:

<form[formGroup]="form">
    <ejs-dropdownlist
        #dropdownlist
        placeholder="{{ placeholder }}"
        [dataSource]="datasource"
        [cssClass]="'e-outline'"
        [fields]="fields"
        [formControlName]="controlName"
        [showClearButton]="true"
        [allowFiltering]="true"
    >
        <ng-template#itemTemplatelet-data>
            <div>
                <spanclass="code-container">{{ data.coa }}</span>{{ data.name }}
            </div>
        </ng-template>
        <ng-template#valueTemplatelet-data>
            <divclass="value-container long-text">
                <spanclass="code-container">{{ data?.coa }}</span>{{ data?.name }}
            </div>
        </ng-template>
    </ejs-dropdownlist>
</form>


// TS file
fields:Object={ text:"name",value:"id"};
form:FormGroup;
constructor(private fb:FormBuilder){}

ngOnInit():void{
this.placeholder ='Choose an account';
this.form =this.fb.group({
accountId:[1],// pre-select id 1
});
this.accountList =[
{id:1, name:'Account A', code:'100'},
{id:2, name:'Account B', code:'200'},
];
}

When I try to pre-select an account for the dropdownlist, it's not showing. Please assist.

1 Reply

VY Vinothkumar Yuvaraj Syncfusion Team February 13, 2023 04:56 PM UTC

Hi Simon,


To set the pre-select value of the DropDownList component, you can use the following code, ensuring that you provide the proper formControlName and name attribute. For further assistance, please refer to the sample provided at the following link:


app.component.html

  <form [formGroup]="skillForm" novalidate id="formId">

    <div class="form-group">

       <ejs-dropdownlist formControlName="skillname" name="skillname"

            [fields] = "fields" [dataSource]='accountList' [allowFiltering]="true"

            [value]='value'>

            <ng-template #valueTemplate let-data>

                <div>{{ data.name }}</div>

            </ng-template>

        </ejs-dropdownlist>

     </div>

</form>


app.component.ts

export class AppComponent {

    constructor(private fbFormBuilder) {

        this.createForm();

    }

    createForm() : void {

        this.skillForm = this.fb.group({

            skillname:[1],

        });

    }


Samplehttps://stackblitz.com/edit/angular-trgdtb?file=src%2Fapp.component.html,src%2Fapp.component.ts

Demohttps://ej2.syncfusion.com/angular/demos/#/bootstrap5/drop-down-list/reactive-form


Regards,

Vinothkumar


Loader.
Up arrow icon