Angular2：Date Format Textbox ngModelが機能しません。

Question

まだAngular2を学んでいます。私はstartDateとendDateを持っているフォームを持っていて、それぞれの項目を入力したいと思っています。私はモデルオブジェクトとフォームへの双方向バインディングを使用しています。私のモデルの

<input type="date" name="EndDate" class="form-control input-sm" [(ngModel)]="selectedDeal.Enddate" required /> 

日付プロパティは、Date型である：

public EndDate: Date, 

私はこれを実行し、有効な日付を持つモデルを結合し、それだけではYYYY/MM/DDを示していますテキストボックス。 HTML5 type = "date"サポート私は推測します。しかし、実際の日付は表示されません。これには日付ピッカーが組み込まれていますが、これは優れていますが、既にプロパティに入っている日付は表示されません。

type = "date"をtype = "text"に変更すると、2018-12-31T00：00：00のようなものが表示され、日付のサポートが失われます。

私は避けるようにしようとしている：誤ったデータ型（文字列）を使用しての使用のための文字列の中に私の日付をフォーマットする必要が） 1を - するためにJavaScript投稿フォームディスプレイを使用して）これは悪いアイデアと実践 2のように思えます文字列形式の日付テキストで値を上書きしようとしてください

これを扱う簡単な方法はありますか？

Answer 1

これは、バインディングを分離し、少量の配管で行うことで実現できます。

テンプレート：（日付パイプは形式2016-12-31を使用している、とngmodelとmodelchangeが分割されています）

<input type="date" name="EndDate" class="form-control input-sm" [ngModel]="selectedDeal.EndDate | date: 'y-MM-dd'" (ngModelChange)="dateChanged($event)" required /> 

コンポーネント：

private dateChanged(newDate) { 
    this.selectedDeal.EndDate= new Date(newDate); 
    console.log(this.selectedDeal.EndDate); // <-- for testing 
    }