title: Angular reactive forms date setvalue
body: <p>I'm working on Angular project, one of the components is update client component where the client's data gets populated to reactive form for editing purpose, client's info is coming from API,<br>
  i used the FormGroup.setvalue for populating the data to the form, all client's data are populated except the Date input field, would you please advice why the Date input field doesn't populate anything, please consider all these information will be resubmitted after editing, </p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { ActivatedRoute, Router } from '@angular/router';
  import { UserService } from 'src/app/services/user.service';
  import { Client } from 'src/app/models/Client';
  import { FormGroup, FormBuilder, FormControl } from '@angular/forms';
  
  
  @Component({
   selector: 'app-update',
   templateUrl: './update.component.html',
   styleUrls: ['./update.component.css']
   })
   export class UpdateComponent implements OnInit {
  
  client:Client= new Client();
  editForm: FormGroup;
  
  constructor(private route:ActivatedRoute, private service:UserService, private router:Router,        private formBuilder:FormBuilder) { }
  
  
  ngOnInit() {
  
   this.editForm = new FormGroup({
    id: new FormControl(),
    domain: new FormControl(),
    owner : new FormControl(),
    email: new FormControl(),
    hostComp : new FormControl(),
    cpUrl: new FormControl(),
    expDate: new FormControl(),
    cpUsername : new FormControl(),
    cpPassword : new FormControl(),
    depDate : new FormControl(),
    notices: new FormControl() 
   });
  
  
  
    this.route.params.subscribe(data=&gt;{
    const id = data.id;
  
  
       this.service.getClient(id).subscribe(data=&gt;{
  
       this.editForm.setValue({
        id: data.id,
        domain: data.domain,
        owner : data.owner,
        email: data.email,
        hostComp : data.hostComp,
        cpUrl: data.cpUrl,
        expDate: data.expDate,
        cpUsername : data.cpUsername,
        cpPassword : data.cpPassword,
        depDate : data.depDate,
        notices: data.notices 
      })     
      });
     });
    }
  
    cancel(){
   let id = this.client.id
   this.router.navigate(['/info', id]);
    }
  
    update(){
  
    this.service.updateClient(this.client).subscribe(data=&gt;{
      this.router.navigate(['/info', this.client.id]);
    });
    }
     }
  </code></pre>
  
  <p>and the html view is like this </p>
  
  <pre><code>&lt;form  [formGroup]="editForm" (ngSubmit)="update()"&gt;
  
  
      &lt;label&gt;Domain&lt;/label&gt;
     &lt;input type="text"  formControlName="domain" name="domain" &gt;
  
     &lt;label&gt;Owner&lt;/label&gt;
      &lt;input type="text"  name="owner" formControlName="owner" &gt;
  
  
     &lt;label&gt;Email&lt;/label&gt;
      &lt;input type="text"  name="email" formControlName="email" &gt;
  
     &lt;label&gt;Hosting Company&lt;/label&gt;
     &lt;input type="text"  name="hostcomp" formControlName="hostComp" &gt;
  
       &lt;label&gt;CP URL&lt;/label&gt;
     &lt;input type="text"  name="cpurl" formControlName="cpUrl" &gt;
  
      &lt;label&gt;Expiration&lt;/label&gt;
      &lt;input type="date"  name="expdate" formControlName="expDate" &gt;
  
      &lt;label&gt;Deployment&lt;/label&gt;
      &lt;input type="date"  name="depdate" formControlName="depDate" &gt;
  
       &lt;button type="submit" class="btn btn-success"&gt;Submit&lt;/button&gt;
       &lt;button type="submit" class="btn btn-primary" (click)="cancel()"&gt;Cancel&lt;/button&gt;
  
     &lt;/form&gt;
  </code></pre>