title: Angular 4 Reactive Form Date not binding
body: <p>I am trying to Post data on Web APi using myDatePicker but the problem is, it is sending a complex object instead of just Date, which the web api cannot read,
  while its opposite when it comes to retrieving the data, it receives the JSON formatted date and display it perfectly.</p>
  
  <p>if i try using input type="text" then it sends the data perfectly and also web api can fetch it and store it onto database, but it doesn't bind it during the retrieval, here is my code, By the Way i am using Angular 4. and .net web api as backend.</p>
  
  <pre><code>`
  &lt;div class="panel panel-primary"&gt;
  &lt;div class="panel-heading"&gt;
      {{pageTitle}}
  &lt;/div&gt;
  
  &lt;div class="panel-body"&gt;
      &lt;form class="form-horizontal"
            novalidate
            (ngSubmit)="saveDetails()"
            [formGroup]="registrationForm" &gt;
          &lt;fieldset&gt;
              &lt;div class="form-group" &gt;
                  &lt;label class="col-md-2 control-label" for="firstNameId"&gt;Name&lt;/label&gt;
  
                  &lt;div class="col-md-8"&gt;
                      &lt;input class="form-control" 
                              id="NameId" 
                              type="text" 
                              placeholder="Name (required)" 
                              formControlName="Name" /&gt;
                  &lt;/div&gt;
  
              &lt;/div&gt;
  
              &lt;div class="form-group" &gt;
                  &lt;label class="col-md-2 control-label" for="lastNameId"&gt;SurName&lt;/label&gt;
  
                  &lt;div class="col-md-8"&gt;
                      &lt;input class="form-control" 
                              id="surNameId" 
                              type="text" 
                              placeholder="Sur Name" 
                              formControlName="SurName" /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="form-group" &gt;
                  &lt;label class="col-md-2 control-label" for="countryID"&gt;Country&lt;/label&gt;
                  &lt;!-- [formControl]="registrationForm.controls['countryID']" --&gt;
                  &lt;div class="col-md-8"&gt;
                      &lt;select class="form-control" formControlName="countryID"&gt;  
                          &lt;option value="0" &gt;--Select--&lt;/option&gt;  
                          &lt;option *ngFor="let cont of country"
                                  value={{cont.cid}}  &gt;  
                              {{cont.CName}}  
                          &lt;/option&gt;  
                      &lt;/select&gt;  
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="form-group" &gt;
                  &lt;label class="col-md-2 control-label" for="Dob"&gt;Date of Birth&lt;/label&gt;
  
                  &lt;div class="col-md-8"&gt;
                      &lt;!-- &lt;my-date-picker name="mydate" [options]="myDatePickerOptions"
                      formControlName="Dob"
                      (dateChanged)="onDateChanged($event)"
                      &gt;&lt;/my-date-picker&gt; --&gt;
  
                      &lt;input type="date" class="form-control" formControlName="Dob" /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="form-group"&gt;
                      &lt;label class="col-md-2 control-label" for="gender"&gt;Gender&lt;/label&gt;
                      &lt;div class="radio col-md-2"&gt;
                          &lt;label&gt;&lt;input type="radio" formControlName="gender"  value="male" &gt;Male&lt;/label&gt;
                      &lt;/div&gt;
                      &lt;div class="radio col-md-2"&gt;
                          &lt;label&gt;&lt;input type="radio" formControlName="gender"  value="female"&gt;Female&lt;/label&gt;
                      &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="form-group" &gt;
                      &lt;label class="col-md-2 control-label" for="firstNameId"&gt;Address&lt;/label&gt;
                      &lt;div class="col-md-8"&gt;
                          &lt;input class="form-control" 
                                  id="addressId" 
                                  type="text" 
                                  placeholder="address" 
                                  formControlName="Address" /&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
              &lt;div class="form-group"&gt;
                  &lt;div class="col-md-4 col-md-offset-2"&gt;
                      &lt;span&gt;
                          &lt;button class="btn btn-primary"
                                  type="submit"
                                  style="width:80px;margin-right:10px"
                                  [disabled]='!registrationForm.valid'
                                  &gt;
                              Save
                          &lt;/button&gt;
  
                      &lt;/span&gt;
                   &lt;/div&gt;
              &lt;/div&gt;
          &lt;/fieldset&gt;
      &lt;/form&gt;
      &lt;div class='has-error' *ngIf='errorMessage'&gt;{{errorMessage}}&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p> </p>
  
  <pre><code>import { Component , OnInit } from '@angular/core';
  import { FormBuilder,FormControlName,Validators,FormGroup } from '@angular/forms';
  
  import { ActivatedRoute, Router } from '@angular/router';
  
  import { Observable } from 'rxjs/Observable';
  import { Subscription } from 'rxjs/Subscription';
  
  import { IRegistration } from './reg';
  import { ICountry } from './country';
  
  
  import {IMyDpOptions , IMyDateModel} from 'mydatepicker';
  
  import { RegistrationService } from './registration.service';
  
  @Component({
      selector: 'reg-form',
      templateUrl: 'app/registration-form.component.html'
  })
  export class RegistrationFormComponent implements OnInit {
  country : ICountry[]; // this is used to loop countries
  registrationForm: FormGroup;
  registration : IRegistration;
  private sub: Subscription;
  pageTitle: string;
  
  constructor( private registrationService: RegistrationService,
              private route: ActivatedRoute,
              private router: Router,
              private formBuilder: FormBuilder ){}
  
  ngOnInit(): void{
      this.registrationForm = this.formBuilder.group({
          Name: ['',Validators.required],
          SurName: ['',Validators.required],
          countryID: ['',Validators.required],
          Dob: [null],
          gender: ['',Validators.required],
          Address: ['',Validators.required]
      });
    //  this.getCountry();
      this.sub = this.route.params.subscribe(
          paramns =&gt; {
              let id = +paramns['id']; // this +paramns['id'] will convert id from string to integer
              this.getRegistration(id);
          }
      )
  }
  
  public myDatePickerOptions: IMyDpOptions = {
      dateFormat: 'dd/mm/yyyy',
  
  };
  getRegistration(id: number): void{
  
     this.getCountry();
      this.registrationService.getRegistration(id)
      .subscribe((reg: IRegistration) =&gt; this.onRegistrationRetrieved(reg));
  }
  onRegistrationRetrieved(reg: IRegistration) : void{
      if(this.registrationForm){
          this.registrationForm.reset();
      }
  
      this.registration = reg;
      if(this.registration.id === 0){
          this.pageTitle = "New Registration";
      }else{
          this.pageTitle = "Edit Registration Detail";
      }
  
      var a = new Date(this.registration.Dob);
      var d = a.getDate()+'-'+ a.getMonth()+ '-'+ a.getFullYear();
  
     // alert(a);
     if(this.registration.id !== 0){
      // Important Note:- FormName (Properties name) must be same..
      this.registrationForm.patchValue({
          Name: this.registration.Name,
          SurName: this.registration.SurName,
          Address: this.registration.Address,
          gender : this.registration.gender,
          countryID: this.registration.countryID,
          Dob : { date:{ year:a.getFullYear(), month: a.getMonth(), day: a.getDate() } }
      });
     }
  
  }
  getCountry(){
      this.registrationService.getCountries().subscribe
      ((cont: ICountry[])=&gt; this.country = cont);
  }
  
  saveDetails(){
  
      if(this.registrationForm.dirty &amp;&amp; this.registrationForm.valid){
          let p = Object.assign({},this.registration,this.registrationForm.value);
          this.registrationService.saveRegistration(p)
          .subscribe(
              () =&gt; this.onSaveComplete()
          );
      }
  }
  onSaveComplete(){
      this.registrationForm.reset();
      this.router.navigate(['List']);
  }
  
  `
  </code></pre>
  
  <p>this is the output when i send data using datepicker i have logged it</p>
  
  <pre><code>`
  {"Name":"Sean","SurName":"Tom","countryID":"3","Dob":{"date":{"year":2017,"month":9,"day":5},"jsdate":"2017-09-04T18:30:00.000Z","formatted":"05/09/2017","epoc":1504549800},"gender":"male","Address":"saa"}
  `
  </code></pre>
  
  <p>i have used this DatePicker 
  <a href="https://github.com/kekeh/mydatepicker" rel="nofollow noreferrer">https://github.com/kekeh/mydatepicker</a></p>
  
  <p>kindly help me, </p>