How to set date default value for reactive form in Angular 6?

Question

I have the form for date filter and I trying set the default value for the start and end date for date inputs.

<form [formGroup]="filter" (ngSubmit)="applyFilter()">
<mat-form-field>
    <input matInput [matDatepicker]="start" formControlName="start" placeholder="Начальная дата">
    <mat-datepicker-toggle matSuffix [for]="start"></mat-datepicker-toggle>
    <mat-datepicker #start></mat-datepicker>
</mat-form-field>
<mat-form-field>
    <input matInput [matDatepicker]="end" formControlName="end" placeholder="Конечная дата">
    <mat-datepicker-toggle matSuffix [for]="end"></mat-datepicker-toggle>
    <mat-datepicker #end></mat-datepicker>
</mat-form-field>

And TS part

refreshFilter() {
  const now = new Date();
  const monthAgo = new Date().setMonth(now.getMonth() - 1).toString();
  console.log(monthAgo)
  console.log(now)
  this.filter = new FormGroup({
  start: new FormControl(monthAgo, []),
  end: new FormControl(now, [])
  });

}

My console.log() for the month ago is 1533908066234 but for new Date is Mon Sep 10 2018 16:34:26 GMT+0300 and with timestamp form input doesn't work. How to get correct format date of month ago for success setting into FormControl ?

Answer 1

If you Want to format a date in Angular you can use the DatePipe Try to use the pipe to format. This allows you to format a date value according to locale rules. If you need more info about this you also can check here: https://angular.io/api/common/DatePipe

Also do this monthAgo.toLocaleDateString()

I hope this helps!

Answer 2

I followed the following steps and it worked as expected:

• created a new Angular 6 app using CLI and added Angular Materials to project
• imported FormsModule and ReactiveFormsModule in app.module.ts
• copied exactly the same html markup as you provided into app.component.html

• added the below code in app.component.ts

  \nimport { Component, OnInit } from '@angular/core'; \nimport {FormControl, FormGroup} from '@angular/forms'; \n\n@Component({ \n  selector: 'app-root', \n  templateUrl: './app.component.html', \n  styleUrls: ['./app.component.css'] \n}) \nexport class AppComponent implements OnInit { \n\n  filter: FormGroup \n\n  ngOnInit() { \n\n
   let now = new Date(); let monthAgo = new Date(); monthAgo.setMonth(now.getMonth() - 1); this.filter = new FormGroup({ start: new FormControl(monthAgo, []), end: new FormControl(now, []) }); 
  \n\n  } \n} \n

Hope this helps.

Answer 3

I found the solution:

const now = new Date();
const monthAgo = new Date(now.getFullYear(), now.getMonth() - 1, now.getDate(), now.getHours());
this.filter = new FormGroup({
    start: new FormControl(monthAgo , []),
    end: new FormControl(now, [])
});

I converting the date from timestamp to string format. That's all.

If somebody knows how to rewriting this more elegantly, I would be grateful.