入力タイプにカスタムControlValueAccessorを使用するときのフォーマットエラー= Angular2の日付rc4

Question

開始する前に、Angular2 rc4とtypescriptを使用しています。あなたが不思議に思っている場合、私はまだアップグレードすることができないので、私はrc4という制約の下でこの作業をしなければなりません。また、私はng2のnoobだから、まだ概念の周りに私の頭と "リリース候補者"間のすべての変更を取得します。

値アクセサーに関する研究をかなり行ったので、日付を入力用の文字列にするために、コンポーネント内に別のミュールプロパティを必要としないように、具体的には<input type=date />を作成することにしました。

私はthis gistが見つかりました。

の出発として、ほとんど、ポイントを終了することを使用して、私はこの思い付いた：

import { Directive, ElementRef, Renderer, forwardRef } from "@angular/core"; 
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms"; 
import { isBlank, isDate } from "@angular/forms/src/facade/lang"; 
import moment from "moment"; 

export const DATE_VALUE_ACCESSOR: any = { 
    provide: NG_VALUE_ACCESSOR, 
    useExisting: forwardRef(() => DateValueAccessor), 
    multi: true 
}; 

@Directive({ 
    selector: 
    "input[type=date][formControlName],input[type=date][formControl],input[type=date][ngModel]", 
    host: { 
     "(change)": "onChange($event.target.value)", 
     "(input)": "onChange($event.target.value)", 
     "(blur)": "onTouched()" 
    }, 
    providers: [DATE_VALUE_ACCESSOR] 
}) 
export class DateValueAccessor implements ControlValueAccessor { 
    onChange = (_: any) => { 
     // we don't need to do anything here 
    }; 

    onTouched =() => { 
     // we don't need to do anything here 
    }; 

    constructor(
     private _renderer: Renderer, 
     private _elementRef: ElementRef) { 
    } 

    writeValue(value: any): void { 
     var normalizedValue: string = isBlank(value) ? "" : (isDate(value) ? moment(value).format("YYYY-MM-DD") : ""); 
     this._renderer.setElementProperty(this._elementRef.nativeElement, "value", normalizedValue); 
    } 

    registerOnChange(fn: (_: any) => void): void { 
     this.onChange = (value: string) => { 
      var date: moment.Moment = moment(value, "YYYY-MM-DD"); 
      var newValue: Date = date.isValid() ? date.toDate() : undefined; 
      fn(newValue); 
     }; 
    } 

    registerOnTouched(fn:() => void): void { 
     this.onTouched = fn; 
    } 
} 

を私はほとんどそこだ感じではなく、かなり！

更新すると、フォームが最初にロード、すべてが互角のドーリーですが、私は新しい日付を選択しようとすると、ブラウザがフォーマットについて不平を言います。 /更新

私は私のデベロッパーツールで見ることができるエラーは次のとおりです。

指定された値「金2016年9月9日00:00:00 GMT + 0100（GMT夏時間）」に準拠していません。必要な形式 "yyyy-MM-dd"。

私はコードを微調整したり、物事を動かしたりするのに少し時間を費やしました。 ...

をもonChange内側からwriteValueへの呼び出し（as can be seen in this plnkr）を作ってみましたが、私はまだエラーを見てきた私は、誰もがこれをやっていますか？私のコードには、私が見逃したことがはっきりしていますか？

Answer 1

確か角度のより最新のバージョン（2.1.0）を使用したが、変更が適用されるべきである、あなたはモデルがあなたのフォーマットされた文字列に正しくバインド見ることができ、ここでPlunkerです：https://plnkr.co/edit/8U0o0m49646tMH0kr1Mx?p=preview

への唯一の変更あなたのコードは次のとおりです。

registerOnChange(fn: (_: any) => void): void { 
    this.onChange = fn; 
} 

これは、表示テキストを持っていないことがあるよう要素として入力タイプ=「日付」にバインドして上書きすることができない、私の知る限り、異なります。クイック検索では、私はIs there any way to change input type="date" format?になります。