BoldSignEasily embed eSignatures in your .NET applications. Free sandbox with native SDK available.
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
<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();
} |