在Angular2 rc4中为输入类型=日期使用自定义ControlValueAccesso

在开始之前,我正在使用Angular2 rc4与typescript.如果你想知道,我不能升级,所以我必须在rc4的限制内使这项工作.另外我还是一个ng2的noob,所以还是把我的头脑围绕着“发布候选人”的概念和所有的变化.

对于值访问器进行了相当多的研究后,我决定专门为< input type = date />以避免在组件中要求单独的mule属性,只是将日期转换为输入的字符串.

我发现了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;
    }
}

我觉得我几乎在那里,但不完全相同！

更新当表单首次加载时,一切都是hunky dory,但是当我尝试选择一个新的日期时,浏览器会抱怨格式. /更新

我在devtools中可以看到的错误是：

The specified value “Fri Sep 09 2016 00:00:00 GMT+0100 (GMT Summer Time)” does not conform to the required format,“yyyy-MM-dd”.

我烧了一点时间调整代码并移动了一些东西.我也试图从onChange(as can be seen in this plnkr)里面调用writeValue,但是我仍然看到错误…

有没有人这样做？在我错过的代码中有什么明显的东西吗？

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