在Angular2 rc4中为输入类型=日期使用自定义ControlValueAccessor时的格式错误

Question

在开始之前,我正在使用带有打字稿的Angular2 rc4.如果你想知道,我还不能升级,所以我必须在rc4的约束下完成这项工作.另外我是一个ng2 noob,所以仍然围绕概念和"候选版本"之间的所有变化.

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

我找到了这个要点,这似乎与我想做的几乎相同.

使用它作为一个起点,几乎结束点,我想出了这个:

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中可以看到的错误是:

指定值"Fri Sep 09 2016 00:00:00 GMT + 0100(GMT Summer Time)"不符合所需格式"yyyy-MM-dd".

我已经花了一些时间调整代码并移动东西.我也尝试过从writeValue内部打电话onChange(可以在这个plnkr中看到),但我仍然看到错误......

有没有人这样做过？在我的代码中是否有一些我错过的东西？

Answer 1

诚然，使用了更新版本的 Angular (2.1.0)，但更改应该适用，并且您可以看到模型正确绑定到格式化字符串，这是一个 Plunker：https: //plnkr.co/edit/8U0o0m49646tMH0kr1Mx ?p =预览

对您的代码的唯一更改是：

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

这没有显示文本变化，因为据我所知，它作为元素绑定到输入 type="date" 并且不能被覆盖。快速搜索将我带到是否有任何方法可以更改输入类型=“日期”格式？这似乎支持了这一说法。