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

前端之家收集整理的这篇文章主要介绍了在Angular2 rc4中为输入类型=日期使用自定义ControlValueAccessor时格式化错误前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
在开始之前,我正在使用Angular2 rc4与typescript.如果你想知道,我不能升级,所以我必须在rc4的限制内使这项工作.另外我还是一个ng2的noob,所以还是把我的头脑围绕着“发布候选人”的概念和所有的变化.

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

我发现了this gist,这似乎做了很多我想做的事情.

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

  1. import { Directive,ElementRef,Renderer,forwardRef } from "@angular/core";
  2. import { ControlValueAccessor,NG_VALUE_ACCESSOR } from "@angular/forms";
  3. import { isBlank,isDate } from "@angular/forms/src/facade/lang";
  4. import moment from "moment";
  5.  
  6. export const DATE_VALUE_ACCESSOR: any = {
  7. provide: NG_VALUE_ACCESSOR,useExisting: forwardRef(() => DateValueAccessor),multi: true
  8. };
  9.  
  10. @Directive({
  11. selector:
  12. "input[type=date][formControlName],input[type=date][formControl],input[type=date][ngModel]",host: {
  13. "(change)": "onChange($event.target.value)","(input)": "onChange($event.target.value)","(blur)": "onTouched()"
  14. },providers: [DATE_VALUE_ACCESSOR]
  15. })
  16. export class DateValueAccessor implements ControlValueAccessor {
  17. onChange = (_: any) => {
  18. // we don't need to do anything here
  19. };
  20.  
  21. onTouched = () => {
  22. // we don't need to do anything here
  23. };
  24.  
  25. constructor(
  26. private _renderer: Renderer,private _elementRef: ElementRef) {
  27. }
  28.  
  29. writeValue(value: any): void {
  30. var normalizedValue: string = isBlank(value) ? "" : (isDate(value) ? moment(value).format("YYYY-MM-DD") : "");
  31. this._renderer.setElementProperty(this._elementRef.nativeElement,"value",normalizedValue);
  32. }
  33.  
  34. registerOnChange(fn: (_: any) => void): void {
  35. this.onChange = (value: string) => {
  36. var date: moment.Moment = moment(value,"YYYY-MM-DD");
  37. var newValue: Date = date.isValid() ? date.toDate() : undefined;
  38. fn(newValue);
  39. };
  40. }
  41.  
  42. registerOnTouched(fn: () => void): void {
  43. this.onTouched = fn;
  44. }
  45. }

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

更新当表单首次加载时,一切都是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,但是我仍然看到错误

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

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

代码的唯一更改是:

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

这不是显示文本的不同,据我所知,绑定到输入type =“date”作为元素,不能被覆盖.快速搜索需要我到Is there any way to change input type=”date” format?这似乎回覆了这个说法.

猜你在找的Angularjs相关文章