Angular：如何在初始化时将时间类型的输入设置为当前时间

Question

我已经使用 FormBuilder 创建了时间和日期输入表单并创建了工作 html 界面

(create.component.html):

<form [formGroup]="createForm" class="create-form">
  <mat-form-field class="field-full-width">
      <input matInput type="time" placeholder="Time of activity" formControlName="time" #time/>
  </mat-form-field>
  <mat-form-field class="field-full-width">
    <input matInput [matDatepicker]="dp" formControlName="date" #date>
    <mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
    <mat-datepicker #dp></mat-datepicker>
  </mat-form-field>
  (...)

我已尝试在此处设置日期（create.component.ts）：

createForm: FormGroup;

constructor(private entryService: EntryService, private fb: FormBuilder, private router: Router) {
this.createForm = this.fb.group({
  time: ['', Validators.required],
  date: ['', Validators.required],
});
}
ngOnInit() {
  this.createForm.patchValue({
    date: new Date(),
    time: new Date()
  });
}

在 DatePicker 中效果不错，但在时间输入中效果不佳：

如何在表单初始化时设置和显示当前时间？

Answer 1

所需的格式是字符串，例如 HH:mm，因此时间类型的输入是这样设置的：

ngOnInit() {
  this.createForm.patchValue({
    date: new Date(),
    time: new Date().getHours() + ':' + new Date().getMinutes()
  });
}