title: the value of the form controls is empty string
body: <p>I am not getting the value of my form control in.ts file. The value is always null. The form is very simple. I have two from control Start date and end date. I am trying toi get the value of start date and end date in my back end .ts file. The calendar associated with these control is popping up, but does not show the dates in the calendar. The calendar is totally blank. Below is my html code:</p>
  
  <pre><code>&lt;div class="headerDiv"&gt;
    &lt;div class="headerTopBanner"&gt;&lt;/div&gt;
    &lt;div class="headerLogo"&gt;
        &lt;div class="logo"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="headerBottomBanner"&gt;
  
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="maxContent"&gt;
    &lt;div *ngIf="!Loaded"&gt;
      &lt;i class="loadingIconSearch fa fa-refresh fa-spin fa-4x fa-fw"&gt;&lt;/i&gt; &lt;span class="loadingIconSubSection"&gt;Loading&lt;/span&gt;
    &lt;/div&gt;
    &lt;div *ngIf="Loaded" &gt;
      &lt;form id="RecProject"&gt;
        &lt;fieldset&gt;
      &lt;div class="row"  &gt;
        &lt;div class="col-md-2"&gt;
          &lt;mat-form-field &gt;
            &lt;input formControlName="startDate" matInput [matDatepicker]="picker" placeholder="Start Date"&gt;
            &lt;mat-datepicker-toggle matSuffix [for]="picker"&gt;&lt;/mat-datepicker-toggle&gt;
            &lt;mat-datepicker #picker&gt;&lt;/mat-datepicker&gt;
            &lt;mat-error &gt;Start date is Required&lt;/mat-error&gt;
          &lt;/mat-form-field&gt;
        &lt;/div&gt;
        &lt;div class="col-md-2"&gt;
          &lt;mat-form-field&gt;
            &lt;input formControlName="endDate" matInput [matDatepicker]="endpicker" placeholder="End Date"&gt;
            &lt;mat-datepicker-toggle matSuffix [for]="endpicker"&gt;&lt;/mat-datepicker-toggle&gt;
            &lt;mat-datepicker #endpicker&gt;&lt;/mat-datepicker&gt;
            &lt;mat-error &gt;End date is Required&lt;/mat-error&gt;
  
          &lt;/mat-form-field&gt;
        &lt;/div&gt;
        &lt;div class="col-md-2"&gt;
          &lt;mat-form-field (keydown.enter)="$event.preventDefault()" &gt;
            &lt;input matInput placeholder="Total Records" formControlName="totalRecords"&gt;
          &lt;/mat-form-field&gt;
        &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row"&gt;
    &lt;div class="col-md-4"&gt;
      &lt;div class="row margintop10"&gt;
          &lt;div class="col-md-12"&gt;
          &lt;mat-form-field (keydown.enter)="$event.preventDefault()" class="fullWidth"&gt;
            &lt;input matInput placeholder="DB Name" formControlName="DBName"&gt;
          &lt;/mat-form-field&gt;
  
  
  &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row"&gt;
  &lt;div class="col-md-5 inputMargin"&gt;
    &lt;button class="appBtn lineButton" (click) = "LoadData()" &gt;
      Start Loading
      &lt;span&gt;&lt;i class="fa fa-map-marker"&gt;&lt;/i&gt;&lt;/span&gt;
    &lt;/button&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  
        &lt;/fieldset&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>My .ts code to read the values of startdate and end date is below:</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { FormGroup, FormControl, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
  import {RecLoadService} from '../shared/RecLoad.service';
  import {RecLoadDataTypeModel} from '../Models/RecLoadData.model';
  
  @Component({
    selector: 'app-Recload',
    templateUrl: './Recload.component.html',
    styleUrls: ['./Recload.component.css']
  })
  export class RecloadComponent implements OnInit {
    public Loaded = true;
    DataUploaded = false;
    message = null;
    public RecLoadData:RecLoadDataTypeModel=null;
  
  
  public startDate = new FormControl('', Validators.required);
  public endDate = new FormControl('' , Validators.required);
    constructor(public service: RecLoadService) { }
  
     ngOnInit() {
    }
  
  
  
  
    LoadData() {
       if (!this.startDate.hasError('required') &amp;&amp; !this.endDate.hasError('required')) {
              this.RecLoadData.startDate  = this.startDate.value;
              this.RecLoadData.endDate = this.endDate.value;
             this.service.UploadRecLoadData(this.RecLoadData).subscribe(() =&gt; {
                this.DataUploaded =true;
                this.message = 'Data uploaded Successfully';
  
             });
  
  
  
         }
   }
  
  
      }
  </code></pre>
  
  <p>When I run the code in chrome browser, the value of start date and end date is always empty strings. Also, the calendar associated with these controls is not showingany dates. Its totally blank. Below is the image:</p>
  
  <p><a href="https://i.stack.imgur.com/Mf0n3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Mf0n3.png" alt="enter image description here"></a></p>
  
  <p>any help will be highly appreciated.</p>