Дата становится массивом

Question

Я хочу отправить форму, но myDate становится массивом, а myTime становится пустым. Я не знаю, почему это так.

Ниже приведен код.

HTML

<form  [formGroup]="form" (ngSubmit)="onSubmit(form.value)"
    novalidate>
<div class="form-group">
    <div class="date-ctrl">
    <label>Start Date</label>
    <input class="form-control long" formControlName="myDate" value="{{myDate | date: 'yyyy-mm-dd'}}" name="myDate"  matInput [matDatepicker]="picker"
           (dateInput)="addEvent('input', $event)" >
    <mat-datepicker-toggle class="img-calendar"  matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
</div>
<div class="time-ctrl">
    <label>Run At</label>
    <ng-template #popTemplate>
            <timepicker [(ngModel)]="myTime" [showMeridian]="false" [ngModelOptions]="{standalone: true}"></timepicker>
        </ng-template>
        <input class="form-control shot" formControlName="myTime" value="{{ myTime | date: 'HH:mm ' }}" [popover]="popTemplate" [outsideClick]="true" placement="bottom" />
</div>
</div>

Компонент

myTime: Date = new Date();
myDate = new Date();

events: string[] = [];

addEvent(type: string, event: MatDatepickerInputEvent<Date>) {
  this.events.push(`${event.value}`);
}

constructor(private formBuilder: FormBuilder,
  private agentservice: AgentService,
  private service: AuthService,
  private snackBar: MatSnackBar,
  public dialogRef: MatDialogRef<ScheduleComponent>,
  @Inject(MAT_DIALOG_DATA) public data: DialogData) {
    this.form = this.formBuilder.group({
      myDate: new FormControl(),
      myTime: new FormControl(),
      agentId: new FormControl()
    });

    this.form.controls.myDate.patchValue(this.form.value.myDate);
    this.form.controls.myTime.patchValue(this.form.value.myTime);
    this.form.controls.agentId.patchValue(data.agentId);

  }

  onSubmit() {
     console.log(this.form.value);
  }