Pre-fill input text boxes from query params on Angular 2
<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>