Angular Material DatePicker将时间戳设置为形式控制值

Question

                <input
                  [value]="question.timestampToMoment(row.controls[column.name].value)"
                  [formControlName]="column.name"
                  [required]="column.required"
                  matInput
                  [matDatepicker]="picker"
                  (dateChange)="question.onDateChange($event)"
                  placeholder="Choose a date"
                />

我希望附加到此datepicker的FormControl具有时间戳为值，以便可以将时间戳发送回后端。然后，在值从后端返回时设置此datepicker的值时，我需要从时间戳将其转换回moment对象。

我想timestampToMoment看起来像：return moment(value * 1000)

我无法弄清楚如何实现onDateChange或任何其他方法来完成此工作。datepicker使用moment.js。

Answer 1

如 @eliseo的评论中所述，这里的诀窍是不要在datepicker输入中包括FormControl，并使用dateChange事件手动更改FormControl的值。datepicker的value可以通过将时间戳传递到功能中来设置。

<input
  [value]="timestampToMoment(form.controls[key].value)"
  [required]="required"
  matInput
  [matDatepicker]="picker"
  (dateChange)="onDateChange($event, form.controls[key])"
  placeholder="Choose a date"
/>
timestampToMoment(value: number): Moment {
  return moment(value * 1000);
}
onDateChange(event: MatDatepickerInputEvent<any>, control: AbstractControl): void {
  control.setValue(event.value.valueOf() / 1000);
}