Angular matDatepicker в Реактивной форме

Question

Я использую matDatepicker (https://material.angular.io/components/datepicker/api) в реактивной форме Angular.

Я создал стек стека для репликации своей проблемы https://stackblitz.com/edit/angular-57kwq6?file=src%2Fapp%2Fapp.component.ts

Я получаю объект Competition с сервера, содержащего объект Date. Этот объект сопоставлен с формой. Я пытаюсь инициализировать datePicker с датой, присутствующей в объекте, но она не работает. Кроме того, когда я выбираю дату и нажимаю кнопку Сохранить, она не обновляет мой объект.

Сервер является приложением с весенней загрузкой. Объект Java:

import java.io.Serializable;
import java.util.Date;
public class Competition implements Serializable {

    private String id;
    private Date date;

    public Date getDate() {
        return date;
    }

    public void setDate(Date date) {
        this.date = date;
    }

}

Мне кажется, у меня возникла проблема с сериализацией даты в json или форматированием даты для компонента datepicker?

Answer 1

Во-первых, если вы используете Angular Reactive Forms , вы не должны использовать ngModel:

<input name="myDate" matInput [matDatepicker]="picker3"
  class="form-control" placeholder="Date"  
  formControlName="date">

Во-вторых, значение даты вашей модели должно быть установите значение Date вместо строки:

this.editor = fb.group({ 
  date: [new Date(this.model.date), Validators.required], 
});