Как установить значение даты по умолчанию для реактивной формы в Angular 6? - PullRequest
Новая
       27

Как установить значение даты по умолчанию для реактивной формы в Angular 6?

0 голосов
/ 10 сентября 2018

У меня есть форма для фильтра даты, и я пытаюсь установить значение по умолчанию для начальной и конечной даты для ввода даты. 

<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>

А, часть ТС 

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, [])
  });

}

Мой console.log() для месяца назад равен 1533908066234, но для новой даты - Mon Sep 10 2018 16:34:26 GMT+0300, а с формой отметки времени ввод не работает. Как получить правильную дату формата месяца назад для успешной установки в FormControl?

Ответы [ 3 ]

0 голосов
/ 10 сентября 2018

Я нашел решение: 

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, [])
});

Я конвертирую дату из метки времени в формат строки. Вот и все.

Если кто-нибудь знает, как переписать это более элегантно, я был бы признателен.

0 голосов
/ 10 сентября 2018

Я выполнил следующие шаги, и все заработало как положено:

  • создал новое приложение Angular 6 с помощью CLI и добавил Angular Materials в проект
  • импортированные FormsModule и ReactiveFormsModule в app.module.ts
  • скопировал точно такую ​​же HTML-разметку, как вы указали в app.component.html

  • добавил приведенный ниже код в app.component.ts 

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  filter: FormGroup

  ngOnInit() {

<pre><code>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, [])
  });
</code>
    } }

Надеюсь, это поможет.

0 голосов
/ 10 сентября 2018

Если вы хотите отформатировать дату в Angular, вы можете использовать DatePipe. Попробуйте использовать конвейер для форматирования.Это позволяет вам форматировать значение даты в соответствии с правилами локали.Если вам нужна дополнительная информация об этом, вы также можете проверить здесь: https://angular.io/api/common/DatePipe

Также сделайте этот месяцAgo.toLocaleDateString ()

Надеюсь, это поможет!

...