title: How can I pass my object to queryParams in Angular 6?
body: <p>I'm using Reactive Forms to populate a form on my page. When the user makes their edits and clicks apply. The values from the form is taken and applied to the url. The form fields are not required and the user can come back to the page and change the fields as much as they like. </p>
  
  <p>I'm looping through each of the form controls to see if their value is falsy. If the value is not falsy I want to take the key and value pairs of my select input and pass it to my router.navigate method to populate the URL. I'm seeing the key and value pairs I want in my console inside of the loop, but I don't know how to save those values to an object and pass it to my queryParams object in the router.navigate method outside of my loop. The relevant code is below. </p>
  
  <p>For clarity I don't want to use the native pristine or touched values to check against because the user can touch the form and change it back to default. Also, if I put the router.navigate() inside of the for in loop only the last key and value pair is added to the URL.</p>
  
  <p>The console.log inside my else statement holds the items that the user selected. How can I take those values and pass to my queryParms in my router.navigate()?</p>
  
  <pre><code>addExtraParameters() {
      for (var key in this.providerForm.controls) {
          this.x = this.providerForm.get(key).value
          if (!this.x || this.x === "null") {
             // this removes items that were not touched or edited
         } else {
             console.log(key, this.x);
         }
      }
  
      this.router.navigate([],
      { queryParams: {
          [key]: this.x // this doesn't work
          }, queryParamsHandling: 'merge'
      });
  }
  </code></pre>