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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

2 how to handle change event for multiple cascaded country-state-city dependent drop down in angular 7. i am interested to save multiple addresses for user where the design goes like below.

Thread ID:

Created:

Updated:

Platform:

Replies:

144299 Apr 29,2019 03:54 PM UTC Apr 30,2019 10:29 AM UTC Angular - EJ 2 1
loading
Tags: DropDownList
Santosh
Asked On April 29, 2019 03:54 PM UTC

below is my typescript file. it has this.states property which is used to populate states by using let state of states(*ngFor). i want to handle on this.states differently for different formGroupArray elements as shown i am replicating country state city on click function addButtonClick().

please help me handle country state city change dynamically as i am clicking on add more button(which adds other group below) and my country change should effect respective state of same group


export class ContactComponent implements OnInit {

public contactForm: FormGroup;
employees: any = [];
countries: any = [];
states: any = [];

constructor(private fb: FormBuilder, private employeeService: EmployeeService, private generalService: GeneralService) { }

ngOnInit() {
    this.onInIt();
}

onInIt(){
    this.contactForm = this.fb.group({  
        employee_name: ['', Validators.required],  
        addressGroup: this.fb.array([this.addMoreGroup()])  
    }); 
    this.employeeService.getEmployees().subscribe((response: Response)=>{
        this.employees = response.statusText;
    });
    this.generalService.getCountries().subscribe((response: Response)=>{
        this.countries = response.statusText;
    });
}

SaveContact(){
    this.employeeService.saveEmployeeContactDetails(this.contactForm.value).subscribe((response: Response)=>{
        console.log(response)
    });
}

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

addMoreGroup(): FormGroup {  
  return this.fb.group({  
        address_line_1: ['', Validators.required],  
        country : ['', Validators.required],  
        state: ['', Validators.required],
        city: ['', Validators.required],  
        pincode : ['', Validators.required]  
  });  
}  


getStates(country: number){
    this.generalService.getStates(country).subscribe((response: Response)=>{
        this.states = response.statusText;
    });
}

addButtonClick(): void {  
    (<FormArray>this.contactForm.get('addressGroup')).push(this.addMoreGroup());  
} 

removeButtonClick(i: number): void {  
    console.log(i);
    (<FormArray>this.contactForm.get('addressGroup')).removeAt(i);  
} 

}

Please refer for image or how design looks likes

https://i.stack.imgur.com/KrsYG.png


Prince Oliver [Syncfusion]
Replied On April 30, 2019 10:29 AM UTC

Hello Santosh, 

Greetings from Syncfusion support. 

You can handle change event for multiple dynamically created dropdowns by passing the component instance in change event argument from the DropDownList element. Kindly refer to the following code snippet. 

<div class="row" *ngFor="let add of addItems" style="margin-top: 10px"> 
    <div class="col-sm-4"> 
        <ejs-dropdownlist #countryList id="country_{{add}}" [dataSource]='country' [fields]='countryFields' 
            (change)='onChange1($event, countryList, stateList)' popupHeight='auto' [placeholder]='countryWaterMark'> 
        </ejs-dropdownlist> 
    </div> 
    <div class="col-sm-4"> 
        <ejs-dropdownlist #stateList id='state_{{add}}' [dataSource]='state' [fields]='stateFields' 
            [placeholder]='stateWaterMark' popupHeight='auto'></ejs-dropdownlist> 
    </div> 
    <div class="col-sm-4"><input placeholder="city" class='e-input'></div> 
</div> 

public onChange1(e, countyObj, stateObj): void { 
    // query the data source based on country DropDownList selected value 
    let tempQuery: Query = new Query().where('CountryId', 'equal', countyObj.value); 
    stateObj.query = tempQuery; 
    // clear the existing selection. 
    stateObj.text = null; 
    // bind the property changes to state DropDownList 
    stateObj.dataBind(); 
} 

We have attached a sample for your reference, please find it in the following location 

Let us know if you need any further assistance on this. 

Regards, 
Prince 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon