Как использовать каналы с ngModel и owldatetime в Angular 8?

Question

У меня есть поле даты, как показано ниже, и я хочу использовать определенный шаблон даты c для этого поля -

<div class="floating-label-wrap">
  <input [(ngModel)]="sourceDatetimeFromDate" [owlDateTime]="sourceDatetimeFromDt"/>
  <label>
    <span class="content-name">Date Range From</span>
  </label>
  <span class="date-trigger-icon" [owlDateTimeTrigger]="sourceDatetimeFromDt">
      <mat-icon>date_range</mat-icon>
  </span>
  <owl-date-time #sourceDatetimeFromDt></owl-date-time>
</div>

Я пробовал ниже, но это не работает -

<div class="floating-label-wrap">
  <input [ngModel]="sourceDatetimeFromDate | date: 'yyyy-MM-dd HH:mm:ss'"
         (ngModelChange)="sourceDatetimeFromDate=$event" 
         [owlDateTime]="sourceDatetimeFromDt"/>
  <label>
    <span class="content-name">Date Range From</span>
  </label>
  <span class="date-trigger-icon" [owlDateTimeTrigger]="sourceDatetimeFromDt">
      <mat-icon>date_range</mat-icon>
  </span>
  <owl-date-time #sourceDatetimeFromDt></owl-date-time>
</div> 

Answer 1

Кроме того, просто добавление атрибута 'value' с конвейером даты также работает.

<div class="floating-label-wrap">
  <input aria-label="source date time from" [(ngModel)]="sourceDatetimeFromDate"
    [owlDateTime]="sourceDatetimeFromDt" 
    [value]="sourceDatetimeFromDate | date: 'yyyy-MM-dd HH:mm:ss'"/>
  <label class="label-datetime">
     <span class="content-name">Date Range From</span>
  </label>
  <span class="date-trigger-icon" [owlDateTimeTrigger]="sourceDatetimeFromDt">
     <mat-icon>date_range</mat-icon>
  </span>
  <owl-date-time #sourceDatetimeFromDt></owl-date-time>
</div>

Answer 2

Я сделал небольшую настройку - у меня есть скрытое поле для двусторонней привязки и видимое поле с датой.

<div class="floating-label-wrap">
  <input aria-label="source date time from" [(ngModel)]="sourceDatetimeFromDate"
    [owlDateTime]="sourceDatetimeFromDt" hidden />
  <input [value]="sourceDatetimeFromDate | date: 'yyyy-MM-dd HH:mm:ss'" />
  <label class="label-datetime">
     <span class="content-name">Date Range From</span>
  </label>
  <span class="date-trigger-icon" [owlDateTimeTrigger]="sourceDatetimeFromDt">
     <mat-icon>date_range</mat-icon>
  </span>
  <owl-date-time #sourceDatetimeFromDt></owl-date-time>
</div>