title: Pre Populate input field in `FormGroup` - Angular2
body: <p>I am using Angular2 - Reactive Forms. Everything works fine until i want to show a pre-populated value in one of fields in Form.</p>
  
  <p><strong>Scenario:</strong> There are multiple buttons on a page and each button opens up a form with fields as</p>
  
  <ol>
  <li>Name</li>
  <li>Email</li>
  <li>Message</li>
  <li>Product Code --> Value for this shall be prepopulated as per item code from service.</li>
  </ol>
  
  <blockquote>
    <p>Failing Scenario: Product Code input value turns to null.</p>
  </blockquote>
  
  <p>TS Code:</p>
  
  <pre><code>import { FormGroup, FormBuilder, Validators } from '@angular/forms';
  queryForm: FormGroup;
  constructor(private _productService: ProductService, fb: FormBuilder) {
      this.queryForm = fb.group({
          'name': [null, Validators.compose([Validators.required, Validators.minLength(5)])],
          'email': [
              null, [Validators.required, Validators.email]
          ],
          'message': [null,Validators.compose([Validators.required, Validators.minLength(5)])],
          'pcode': [
              null
          ],
      })
  }
  </code></pre>
  
  <p>HTML Form:</p>
  
  <pre><code>&lt;div *ngFor="let item of product"&gt;
  &lt;form action="#" [formGroup]="queryForm" 
   (ngSubmit)="submitForm(queryForm.value)" method="post" 
    novalidate="" class="text-left note" id="f_{{item.productId}}"&gt;
      [ .... rest of the fields ...]
      &lt;div class="form-group hidden"&gt;
            &lt;input type="hidden " class="form-control " id="pcode " name="pcode" 
          formControlName="pcode" [value]="item.productCode" /&gt;
       &lt;/div&gt;
       &lt;div class="form-group"&gt;
             &lt;button type="submit" class="btn1" [disabled]="!queryForm.valid"&gt;Submit&lt;/button&gt;
        &lt;/div&gt;
  &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>How can i achieve this?</p>