Help me implement the requirements of the question below to fit into my already code in my profile editor. component. html$.$ The remaining code after state in the profile editor.component code is below. zip: $[\text{'}\text{'}],$

aliases: this.formBuilder.array$([$this$.$formBuilder.control$(\text{'}\text{'})]),$

$\})$;

$\}$

onSubmit$()\{$

console.warn$($this$.$profileForm.value$)$;

$\}$

updateProfile$()\{$

this.profileForm.patchValue$(\{$

firstName: 'Nancy',

lastName: 'Stone',

street: $\text{'}123$ Drew Street',

$\})$;

$\}$

get aliases$()\{$

return this.profileForm.get$(\text{'}$aliases$\text{'})$ as FormArray;

$\}$

addAlias$()\{$

this.aliases.push$($this$.$formBuilder.control$(\text{'}\text{'}))$;

$\}$

$\}$

question of the assignment

Implement an event binding so that when the user enters a Zip code on the form, it automatically fills the City based on the zip code entered. Here is a list of zip codes and the cities near the university that you can use for the assignment. Please note that the list is not exhaustive and you may choose to include more zip codes or cities. You can use the USPS Zip Code Lookup$($this link opens in a new window$/$tab$)$ tool to find more zip codes.

Kennesaw: $30144,30152$

Marietta: $30060,30061,30062,30063,30064,30065,30066,30067,30068,30069$

Woodstock: $30188,30189$

To limit the scope of the assignment, you will hard code the zip codes and the corresponding cities in the program. You DO NOT need to integrate with the USPS Zip Code Lookup API.

You may choose to autofill the State based on the zip code as well, but it is not required.

$3.$ Create a lab report using Word and insert screenshot$($s$)$ demonstrating both the code snippets and the results of the auto$-$fill in the browser. The screenshot$($s$)$ MUST contain the URL in the browser window.

Hint

$1.$ You may bind with the DOM event onchange, and then create a function onZipChange$()$ in the $.$ts file to handle the event. Keep in mind that you will have to move your cursor out of the Zip input field in order to trigger the onchange event. Other options to consider are onblur, onkeyup, etc.

$2.$ To retrieve the value from a nested FormGroup item, use the getter method.

The Profile Editor form from the Reactive Forms tutorial. Code to get the value of Zip from user input.

let postal$\_$code $=$ this.profileForm.get$(\text{'}$address$\text{'}).$get$(\text{'}$zip$\text{'}).$value;

$3.$ I recommend that you create a separate function getCityByZip$($zip: string$)$ or something similar to handle the task of locating the city by zip code.