title: Pre-fill input text boxes from query params on Angular 2
body: <p>I have a form on one page with 2 input boxes and when i click submit then the router navigates to another page with 2 input boxes and a submit button.</p>
  
  <p>So far i've managed to pass the query params to the 2nd page and pre-filled the input boxes.</p>
  
  <p>Problem is, when i hit submit button on page 2, the values from the input boxes are not submitted. If i "touch" the boxes and enter something else, then the submit works fine and the edited values are being submitted. </p>
  
  <p>1st page ( i'm leaving out the rest of the code, this part works ok)</p>
  
  <pre><code>this._router.navigate(['/dashboard/test/new'], 
  { queryParams: {'name': this.name.value , 'lastname':this.lastname.value}});
  </code></pre>
  
  <p>2nd page</p>
  
  <pre><code>private subscription: Subscription
  paramName: string;
  paramLastName: string
  
  this.subscription = this.activatedRoute.queryParams.subscribe(
    params =&gt; {
      this.paramName     = params['name'];
      this.paramLastName = params['lastname'];
    }
  )
  </code></pre>
  
  <p>And here is the html:</p>
  
  <pre><code>&lt;form [formGroup]="myFormTest" (ngSubmit)="onSubmitNew()" class="onl_loginForm" novalidate&gt;
        &lt;div class="form-group"&gt;
          &lt;label for="name" class="control-label"&gt;Name &lt;/label&gt;
          &lt;input type="text" formControlName="name" class="form-control" id="name"  value="{{paramName}}" required&gt;
        &lt;/div&gt;
        &lt;div class="form-group"&gt;
          &lt;label for="lastname" class="control-label"&gt;Last Name &lt;/label&gt;
          &lt;input type="text" formControlName="lastName" class="form-control" id="lastname" value="{{paramLastName}}" required&gt;
        &lt;/div&gt;
  &lt;button type="submit" class="btn-save"&gt;Submit&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>How can i force the form to "read" the two input fields values without touching them?</p>