Question

在开始之前我正在使用带有打字稿的Angular2 rc4 。如果你想知道，我还不能升级，所以我必须在 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中可以看到的错误是：

指定值“Fri Sep 09 2016 00:00:00 GMT + 0100（GMT夏令时间）”不符合所需格式“yyyy-MM-dd”。

我已经花了一些时间调整代码并移动东西。我还尝试从writeValue（as can be seen in this plnkr）内部拨打onChange，但我仍然看到错误...

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

Answer 1

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

对代码的唯一更改是：

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

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

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

1 个答案: