Click here to Skip to main content
15,880,392 members
Please Sign up or sign in to vote.
4.00/5 (1 vote)
On my current Angular page I have a select dropdown which is autopopulated with addresses that currently exists for a client, with the final option being "Add New Address". When this is clicked, a modal window is shown where a new address can be entered. When the address is saved it should be added to the dropdown and selected by default.

I've searched online but haven't been able to find anything that worked. Any guidance would be greatly appreciated.

Thanks in advance.

What I have tried:

Currently this is the method that is executed when the new address is saved:
<pre lang="Javascript">addressSubmitted(form: FormGroup) {
    if(form.valid){
      var addressLine1 = form.controls['address'].value;
      var addressLine2 = form.controls['address2'].value;
      addressLine2 = addressLine2.trim();
      var city = form.controls['city'].value;
      var stateId = form.controls['state'].value;
      var state = this.SelectedState; //form.controls['state'].find()
      var postalCode = form.controls['zip'].value;

      var fullAddress = addressLine1 + ', ';
      if('' != addressLine2){
        fullAddress = fullAddress + addressLine2 + ', ';
      }
      fullAddress = fullAddress + city + ', ' + state + ' ' + postalCode
      -->this.popupForm.controls['address_select'].xxxx;
    }
    else{
      this.servicePNotify.error("Error","New address information is not complete");
      this.service.validateAllFormFields(form);
    }

The dropdown in the popupForm form is named address_select and is the control that should have the new address added.
Posted
Updated 15-Apr-19 15:17pm

1 solution

Your list of addresses should be a collection that exists in code. It would need two way binding. You can then add the new item to the collection and it will rebind and show it. You didn't post your template, does it have a way to set the selected item? This should also be a variable you can then change in your typescript code.
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900