How to set the date in angular reactive forms using patchValue

Question

I'm trying to set the value of the datepicker control with time. Not able to accomplish

Tried converting to desired format

app.component.html:

<input id="requestdate" type="date" class="form-control" formControlName="requestdate" 

app.component.ts:

ngOnInit() {

this.loginForm = this.formBuilder.group({ 
                    requestdate : ['']
                  })

let date = new Date()
date = date.toLocaleDateString().substring(0,10)

this.loginForm.get('requestdate').patchValue(date)


}

Not able to see the transformed date

Answer 1

You seem to have used the wrong syntax while reassigning the date variable. Since it was initialized as a Date, it won't accept a string in the format that you're supplying it in. You'll have to use the YYYY-MM-DD format.

Try this:

import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  loginForm: FormGroup;

  constructor(
    private formBuilder: FormBuilder
  ) { }

  ngOnInit() {
    this.loginForm = this.formBuilder.group({
      requestdate: ['']
    })
    this.loginForm.get('requestdate').patchValue(this.formatDate(new Date()));
  }

  private formatDate(date) {
    const d = new Date(date);
    let month = '' + (d.getMonth() + 1);
    let day = '' + d.getDate();
    const year = d.getFullYear();
    if (month.length < 2) month = '0' + month;
    if (day.length < 2) day = '0' + day;
    return [year, month, day].join('-');
  }
}

Don't forget to wrap the input field around a form tag with formGroup attribute set to loginForm:

<form [formGroup]="loginForm">
  <input
    id="requestdate" 
    type="date" 
    class="form-control" 
    formControlName="requestdate" />
</form>

---

Here's a Working Sample StackBlitz for your ref.