angular - 在 Angular2 rc4 中对输入类型 = 日期使用自定义 ControlValueAccessor 时出现格式错误

Question

在我开始之前，我使用 Angular2 rc4 和 typescript 。如果您想知道，我还不能升级，所以我必须在 rc4 的约束下完成这项工作。此外，我是一个 ng2 菜鸟，所以我仍然在思考概念和“候选发布”之间的所有变化。

在对值访问器进行了大量研究之后，我决定专门为 <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;
    }
}

我觉得我快到了，但还不完全是!

更新 首次加载表单时，一切都很正常，但当我尝试选择新日期时，浏览器会提示格式问题。 /更新

我在我的开发工具中看到的错误是:

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".

我花了一些时间来调整代码和移动东西。我也试过调用 writeValue从里面onChange ( as can be seen in this plnkr )，但我仍然看到错误...

有人做过吗？我的代码中是否有明显遗漏的内容？

Answer 1

不可否认，使用的是更新版本的 Angular (2.1.0)，但更改应该适用，您可以看到模型正确绑定(bind)到您的格式化字符串，这是一个 Plunker:https://plnkr.co/edit/8U0o0m49646tMH0kr1Mx?p=preview

您的代码唯一的变化是:

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

这没有显示文本变化，据我所知，它作为元素绑定(bind)到输入 type="date"并且不能被覆盖。快速搜索将我带到 Is there any way to change input type="date" format?这似乎支持了这一说法。