Hey there! I'm currently working on a feature that involves taking user input for zip codes and triggering the "key up" event to populate available stores and cities in that area. Below is a snippet of the code I've been using:
delivery.component.ts
zip: any = {
"10020": ["A", "B" ],
"20050":[ "X", "Y" ]
};
getCityFunction = (theCurrentZip: any) => {
let key = Object.keys(this.zip).filter(z => {
return z.includes(theCurrentZip)
}).values();
console.log("here",key);
}
onKeyUpTrigger(event: any){
this.deliveryForm.patchValue({
city: this.getCityFunction(event.target.value)
})
}
delivery.component.html
<form [formGroup]="deliveryForm" >
<div style="margin: 0 auto;text-align: left;">
<div>
<label>Zip Code:</label>
<div><input id="zip" type="text" formControlName="zip" (keyup)="onKeyUpTrigger($event)"/></div>
</div>
<div>
<label>City Name:</label>
<input id="city" type="text" formControlName="city">
</div>
</div>
</form>