title: Angular Reactive Form value is empty
body: <p>In my Angular project, I have a Product component, which contain a Reactive Form:</p>
  
  <pre><code>this.productForm = this.formBuilder.group({
         prodid: ['', [Validators.required]],
         prodname: ['', [Validators.required]],
         prodprice: ['', [Validators.required, Validators.pattern(/^[.\d]+$/)]],
         picture: ['', [Validators.required]],
         category: ['', [Validators.required]]
     });
  </code></pre>
  
  <p>In the HTML page i'm setting the value of the fields, using [value], as follows:</p>
  
  <pre><code>&lt;form [formGroup]="productForm" (ngSubmit)="onSubmit()"&gt;
          &lt;div class="form-group"&gt;
              &lt;label&gt;Id&lt;/label&gt;
              &lt;input type="text" formControlName="prodid" class="form-control" readonly [value]="currentProduct!=null?currentProduct.product_id:null" /&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
              &lt;label&gt;Name&lt;/label&gt;
              &lt;input type="text" formControlName="prodname" class="form-control" [ngClass]="{ 'is-invalid': submitted &amp;&amp; f.prodname.errors }"
               [value]="currentProduct!=null?currentProduct.product_name:null" /&gt;
              &lt;div *ngIf="submitted &amp;&amp; f.prodname.errors" class="invalid-feedback"&gt;
                  &lt;div *ngIf="f.prodname.errors.required"&gt;Name is required&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="form-group"&gt;
              &lt;label&gt;Price&lt;/label&gt;
              &lt;input type="number" formControlName="prodprice" class="form-control" 
               [ngClass]="{ 'is-invalid': submitted &amp;&amp; f.prodprice.errors }" step="0.01" 
               [value]="currentProduct!=null?currentProduct.price:null" /&gt;
              &lt;div *ngIf="submitted &amp;&amp; f.prodprice.errors" class="invalid-feedback"&gt;
                  &lt;div *ngIf="f.prodprice.errors.required"&gt;Price is required&lt;/div&gt;
                  &lt;div *ngIf="f.prodprice.errors.pattern"&gt;Price is invalid&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
              &lt;label&gt;Picture Path&lt;/label&gt;
              &lt;input type="text" formControlName="picture" class="form-control" 
               [ngClass]="{ 'is-invalid': submitted &amp;&amp; f.picture.errors }" 
               [value]="currentProduct!=null?currentProduct.img_path:null" /&gt;
              &lt;div *ngIf="submitted &amp;&amp; f.picture.errors" class="invalid-feedback"&gt;
                  &lt;div *ngIf="f.picture.errors.required"&gt;Picture Path is required&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
              &lt;label&gt;Category&lt;/label&gt;
              &lt;select formControlName="category" class="form-control" [ngClass]="{ 'is-invalid': submitted &amp;&amp; f.category.errors }" 
               [value]="currentProduct!=null?currentProduct.category_id:null"&gt;
                  &lt;option  *ngFor="let cat of arrCategories" value="{{cat.id}}" &gt;{{cat.name}}&lt;/option&gt;
              &lt;/select&gt;
              &lt;div *ngIf="submitted &amp;&amp; f.category.errors" class="invalid-feedback"&gt;
                  &lt;div *ngIf="f.category.errors.required"&gt;Category is required&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          {{productForm.value | json }}
  </code></pre>
  
  <p>The fields value are displayed correctly, with the correct value, but the {{productForm.value}} is empty, and when pressing Submit, the required error is being raised.</p>
  
  <p>Please note, if I manually enter a value into the fields, it's ok. it's empty only if the value is being set by [value] in the html code, and does not being changed manually.</p>
  
  <p>Any idea?</p>