title: Pre-populating and validating date in Angular 6 reactive form
body: <p>All the rest of the fields are getting pre-populated except date for me. </p>
  
  <p>For testing purposes, i have hard coded the date as MM/DD/YYYY. </p>
  
  <p>From the DB, i'll get Date and Time, so i'll need to use the pipe to make it MM/DD/YYYY (am i correct about this?)</p>
  
  <p>component code</p>
  
  <pre><code>this.projectForm = new FormGroup({
    'name': new FormControl(project.ProjectName, [Validators.required, Validators.minLength(3), Validators.maxLength(20)]),
    'customerName': new FormControl(project.CustomerName, [Validators.required, Validators.minLength(3), Validators.maxLength(20)]),
    'soNo': new FormControl(project.CustomerOrderId, [Validators.required, Validators.maxLength(30)]),
  
    'poNo': new FormControl({ value: project.PurchaseOrderId, disabled: true }),
  
    'expectedDate': new FormControl({ value: project.ExpectedDate, disabled: true }), 
    'installDate': new FormControl(project.InstallDate),
    'closeDate': new FormControl(project.CloseDate),
  
    'status': new FormControl(project.Status, [Validators.required, ForbiddenProjectStatusValidator.forbiddenProjectStatus])
  });
  
  
  //setting the dates and status dropdown
  this.projectForm.patchValue({
    'expectedDate': '08/17/2018',
    'installDate': '08/18/2018',
    'closeDate': '08/19/2018',
    'status': project.Status ? project.Status : "" 
  });
  </code></pre>
  
  <p>html</p>
  
  <pre><code>&lt;input type="date" id="expectedDate" class="form-control" placeholder="Expected Date" formControlName="expectedDate"&gt;
  </code></pre>
  
  <p>Due to input type date, browser shows calendar control. </p>
  
  <p>So basically, </p>
  
  <p>How to </p>
  
  <ul>
  <li>pre-populate date</li>
  <li>validate date that it is MM/dd/yyyy (none of the dates are required). User might not enter or select full date </li>
  </ul>
  
  <p><a href="https://i.stack.imgur.com/OIFXB.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OIFXB.jpg" alt="enter image description here"></a></p>
  
  <p>Update 1: </p>
  
  <p>selected answer is perfect, it details the use of moment but for now i have gone with simplest solution... </p>
  
  <p><a href="https://css-tricks.com/prefilling-date-input/" rel="nofollow noreferrer">https://css-tricks.com/prefilling-date-input/</a></p>
  
  <p><a href="https://stackoverflow.com/questions/43630445/how-to-convert-current-date-to-yyyy-mm-dd-format-with-angular-2/43630504">how to convert current date to YYYY-MM-DD format with angular 2</a></p>
  
  <p><a href="https://stackoverflow.com/questions/3552461/how-to-format-a-javascript-date">How to format a JavaScript date</a></p>
  
  <p>This is what is working for me </p>
  
  <pre><code>expectedDate: new Date('08/08/2018').toISOString().substr(0, 10)
  </code></pre>
  
  <p>or current as </p>
  
  <pre><code>expectedDate: new Date(new Date().toLocaleDateString("en-US")).toISOString().substr(0, 10) 
  </code></pre>
  
  <p>or </p>
  
  <pre><code>expectedDate: '2018-08-08' 
  </code></pre>
  
  <p>the date has to be YYYY-MM-DD. </p>
  
  <p>For validation, pattern is working</p>
  
  <pre><code>'expectedDate': new FormControl(project.InstallDate, [Validators.pattern('[0-9]{4}-[0-9]{2}-[0-9]{2}')])
  </code></pre>