How to get value from DropdownList with ReactiveForm, in angular ^14.1,

[Tarun]

customer-group.module.ts

import { NgModule, NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

import { CommonModule } from '@angular/common';

import { ReactiveFormsModule } from '@angular/forms';

import { CustomerGroupRoutingModule } from './customer-group-routing.module';

import { CustomerGroupListComponent } from './customer-group-list/customer-group-list.component';

import { AddCustomerGroupComponent } from './add-customer-group/add-customer-group.component';

import { SharedModule} from '../shared/shared.module';

import { DropDownListModule } from '@syncfusion/ej2-angular-dropdowns';

@NgModule({

declarations: [CustomerGroupListComponent,AddCustomerGroupComponent],

imports: [

CommonModule,

ReactiveFormsModule,

CustomerGroupRoutingModule,

SharedModule,

DropDownListModule,

],

schemas: [NO_ERRORS_SCHEMA,CUSTOM_ELEMENTS_SCHEMA],

})

export class CustomerGroupModule { }

add-customer-group.component.ts

import { Component, OnInit } from '@angular/core';

import { ActivatedRoute } from '@angular/router'

import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms';

import { CustomerGroup } from '../models/customerGroup';

import { PriceListGroup } from '../models/priceListGroup';

@Component({

selector: 'app-add-customer-group',

templateUrl: './add-customer-group.component.html',

styleUrls: ['./add-customer-group.component.css']

})

export class AddCustomerGroupComponent implements OnInit {

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

{ statusId: 1, statusName: 'Active' },

{ statusId: 2, statusName: 'Inactive' },

];

public priceListDropDn:{ [key:string]:Object }[] = [];

customerGroup: CustomerGroup;

public priceListFileds: Object = { text:'name', value: 'id'};

public priceListPlaceholder: string = 'Select Price List'

public statusFields: Object = { text: 'statusName', value: 'statusId' };

public statusPlaceholder: string = 'Status';

multiSubmitFlag: boolean = false;

constructor(

public appComp: AppComponent, private route: ActivatedRoute ,

private customerGroupService: CustomerGroupService, private router: Router,

private confirmationDialogService: ConfirmationDialogService, private formBuilder: FormBuilder,

private globalService: GlobalServiceService

){

this.customerGroup = {

id: 0,

priceListId : undefined,

name: "",

statusId: 0,

statusName: undefined,

priceListName:"",

}

this.globalService.submitErrorFlag.subscribe((flag) => {

this.multiSubmitFlag = flag;

console.log("submit flag ", flag);

});

}

ngOnInit() {

this.getPriceList();

this.customerGroupForm = this.formBuilder.group({

name: new FormControl('', Validators.compose([

Validators.required,

Validators.maxLength(50)

])),

priceListId:new FormControl('', Validators.compose([Validators.required])),

statusId: new FormControl(1),

statusName: '',

priceListName: ''

});

}

getPriceList(){

this.customerGroupService.getActivePriceList().subscribe((data:any)=>{

this.priceListDropDn = data.data; /* data response from api in json format: */

});

}

/data response back getActivePriceList().subsribe is ;

"data": [

        {

            "id": 43,

            "name": "dssgfddg",

            "description": "sdfsdgfd",

            "effectiveFromDate": "21/07/2022",

            "percentage": 0.0,

            "operation": "",

            "status": 1

        },

        {

            "id": 45,

            "name": "jhfgh",

            "description": "hhgyuh",

            "effectiveFromDate": "21/07/2022",

            "percentage": 0.0,

            "operation": "",

            "status": 1

        },

        {

            "id": 46,

            "name": "cvxc",

            "description": "xcvdv",

            "effectiveFromDate": "28/07/2022",

            "percentage": 0.0,

            "operation": "",

            "status": 1

        },

        {

            "id": 19,

            "name": "Test Garvita 12",

            "description": "",

            "effectiveFromDate": "21/06/2022",

            "percentage": 0.0,

            "operation": "",

            "status": 1

        },

        {

            "id": 70,

            "name": "Ram test list 2",

            "description": "dfdfdfddfdfdfdf",

            "effectiveFromDate": "15/03/2022",

            "percentage": 0.0,

            "operation": "",

            "status": 1

        },

        {

            "id": 50,

            "name": "afsf",

            "description": "dfdsfd",

            "effectiveFromDate": "22/07/2022",

            "percentage": 0.0,

            "operation": "",

            "status": 1

        },

        {

            "id": 51,

            "name": "fgf",

            "description": "bfgbf",

            "effectiveFromDate": "14/07/2022",

            "percentage": 0.0,

            "operation": "",

            "status": 1

        },

        {

            "id": 52,

            "name": "rfgrfg",

            "description": "xvd",

            "effectiveFromDate": "13/07/2022",

            "percentage": 0.0,

            "operation": "",

            "status": 1

        },

        {

            "id": 53,

            "name": "fsdf",

            "description": "dfsd",

            "effectiveFromDate": "25/07/2022",

            "percentage": 0.0,

            "operation": "",

            "status": 1

        },

        {

            "id": 54,

            "name": "sdfdg",

            "description": "sgsd",

            "effectiveFromDate": "21/07/2022",

            "percentage": 0.0,

            "operation": "",

            "status": 1

        },

        {

            "id": 55,

            "name": "fsg",

            "description": "gfdgfdg",

            "effectiveFromDate": "20/07/2022",

            "percentage": 0.0,

            "operation": "",

            "status": 1

        },

        {

            "id": 56,

            "name": "fgg",

            "description": "fgfd",

            "effectiveFromDate": "21/07/2022",

            "percentage": 0.0,

            "operation": "",

            "status": 1

        },

        {

            "id": 57,

            "name": "sfsa",

            "description": "fdfd",

            "effectiveFromDate": "22/07/2022",

            "percentage": 0.0,

            "operation": "",

            "status": 1

        },

        {

            "id": 59,

            "name": "grg",

            "description": "fgfdr",

            "effectiveFromDate": "13/07/2022",

            "percentage": 0.0,

            "operation": "",

            "status": 1

        },

        {

            "id": 23,

            "name": "dkt 1",

            "description": "dealer prices",

            "effectiveFromDate": "07/07/2022",

            "percentage": 0.0,

            "operation": "",

            "status": 1

        },

        {

            "id": 26,

            "name": "test",

            "description": "",

            "effectiveFromDate": "20/07/2022",

            "percentage": 0.0,

            "operation": "",

            "status": 1

        },

        {

            "id": 69,

            "name": "Ram test list",

            "description": "this is test done by ram",

            "effectiveFromDate": "15/03/2022",

            "percentage": 50.0,

            "operation": "discount",

            "status": 1

        },

        {

            "id": 44,

            "name": "hgg",

            "description": "ytrfgh hgfdy ",

            "effectiveFromDate": "25/07/2022",

            "percentage": 50.0,

            "operation": "discount",

            "status": 1

        },

        {

            "id": 18,

            "name": "test2",

            "description": "dealer prices",

            "effectiveFromDate": "27/07/2022",

            "percentage": 2.0,

            "operation": "discount",

            "status": 1

        },

        {

            "id": 63,

            "name": "tk test",

            "description": "asder",

            "effectiveFromDate": "10/08/2022",

            "percentage": 0.0,

            "operation": "",

            "status": 1

        },

        {

            "id": 66,

            "name": "Test price list",

            "description": "tk test2",

            "effectiveFromDate": "10/08/2022",

            "percentage": 50.0,

            "operation": "discount",

            "status": 1

        },

        {

            "id": 71,

            "name": "testram",

            "description": "dkjdjjdkjkfdfjkjfkdjfkdjfkjfjd",

            "effectiveFromDate": "26/08/2022",

            "percentage": 0.0,

            "operation": "",

            "status": 1

        },

        {

            "id": 73,

            "name": "ramkrishnatestprice",

            "description": "dfdfdfdfdfdfdfdfd",

            "effectiveFromDate": "05/08/2022",

            "percentage": 0.0,

            "operation": "",

            "status": 1

        },

        {

            "id": 20,

            "name": "testing3",

            "description": "Created by mukesh",

            "effectiveFromDate": "23/06/2022",

            "percentage": 0.0,

            "operation": "",

            "status": 1

        },

        {

            "id": 38,

            "name": "hfg",

            "description": "ghjhgu",

            "effectiveFromDate": "21/07/2022",

            "percentage": 20.0,

            "operation": "discount",

            "status": 1

        },

        {

            "id": 17,

            "name": "PL dk test1",

            "description": "acsadfsa",

            "effectiveFromDate": "01/04/2022",

            "percentage": 20.0,

            "operation": "discount",

            "status": 1

        },

        {

            "id": 74,

            "name": "firsttest",

            "description": "fdfdfdfdfdf",

            "effectiveFromDate": "30/08/2022",

            "percentage": 0.0,

            "operation": "",

            "status": 1

        },

        {

            "id": 75,

            "name": "Test",

            "description": "add",

            "effectiveFromDate": "14/09/2022",

            "percentage": 0.0,

            "operation": "",

            "status": 1

        },

        {

            "id": 39,

            "name": "gfgh",

            "description": "fdgfd",

            "effectiveFromDate": "23/07/2022",

            "percentage": 10.0,

            "operation": "discount",

            "status": 1

        },

        {

            "id": 41,

            "name": "fsdfsd",

            "description": "sdfsdg",

            "effectiveFromDate": "13/07/2022",

            "percentage": 10.0,

            "operation": "discount",

            "status": 1

        }

    ]

get f() { return this.customerGroupForm.controls; }

onSubmit(){

if(this.customerGroupForm.invalid){

return ;

}

else{

console.log(this.customerGroupForm.value);

}

add-customer-group.component.html

<form [formGroup]="customerGroupForm" (ngSubmit)="onSubmit()">

<div class="form-group">

<div class="row">

<div class="col-sm-4 itmloctxtalgn">

<label>Price List Name</label>

</div>

<div class="col-sm-8">

<ejs-dropdownlist id='ddlelement' name="priceListId" [dataSource]='priceListDropDn' formControlName="priceListId"

class="form-control" [fields]="priceListFileds" [placeholder]='priceListPlaceholder'

[allowFiltering]='true' (click)="setAttribute()"

[ngClass]="{'is-invalid': (f['priceListId'].touched ||

f['priceListId'].dirty) && !f['priceListId'].valid }" >

</ejs-dropdownlist>

<div class="invalid-feedback">

<div *ngIf="f['priceListId'].hasError['required']">Price List is required</div>

</div>

</div>

</div>

</div>

<button ejs-button cssClass="" class="submit button_padding button_margin buttonSize"

[disabled]="!customerGroupForm.valid"

*ngIf="isEdit==false && isAddAccess==true && !appComp?.isCompanyExired" type="submit">Submit</button>

</form>

AngularCli Vesion: 14.1

 syncfusion version : 20.2.44

Here I'm trying to connect ReactiveFormModule with <ejs-dropdownlist formcontrolname="">

but it's not woking. I'm unable to capture the changes of dropdown using formcontrolname.

Help me out to resolve this scenario.

[Sureshkumar P]

Hi Tarun,

We have fixed your reported issue from our end in the latest 20.2.48 version. So, we suggest you upgrade to our latest version to resolve the current issue.

Please find the release notes here https://ej2.syncfusion.com/angular/documentation/release-notes/20.2.48/?type=all#common

Regards,

Sureshkumar P