Question

我正在使用Angular反应形式的matDatepicker（https://material.angular.io/components/datepicker/api）。

我创建了一个堆栈闪电来复制我的问题https://stackblitz.com/edit/angular-57kwq6?file=src%2Fapp%2Fapp.component.ts

我从服务器中获得了一个包含Date对象的对象Competition。该对象映射到表单。我正在尝试使用对象中存在的日期初始化datePicker，但是它不起作用。此外，当我选择一个日期并单击“保存”时，它不会更新我的对象。

该服务器是Spring Boot应用程序。 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's 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], 
});

角形matDatepicker以反应形式

1 个答案: