实现 ControlValueAccessor 的 Angular 2 指令不会在更改时更新“触摸"属性 [英] Angular 2 Directive implementing ControlValueAccessor doesn't update 'touched' property on change

问题描述

我正在尝试为 Jquery UI Datepicker 创建我自己的 Angular 2 指令.我在互联网和 SO 中也看到了一些不同的方法，但没有人达到我想要的目标.所以这是我到目前为止的代码:

I'm trying to create my own Angular 2 Directive for Jquery UI Datepicker. I've seen some different approaches on the internet and in SO as well, but no one achieves the goal that I want to. So this is the code that I have so far:

import {Directive, ElementRef, Input, forwardRef} from '@angular/core';
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from "@angular/forms";

declare  var $:any;

@Directive({
  selector: '[date-picker]',
  providers: [{
    provide: NG_VALUE_ACCESSOR,useExisting:
      forwardRef(() => DatePickerDirective),
    multi: true
  }]
})
export class DatePickerDirective implements ControlValueAccessor {
  private value: string;

  @Input('changeMonth') changeMonth:boolean = true;
  @Input('changeYear') changeYear:boolean = true;

  constructor(private el: ElementRef) {

  }

  ngAfterViewInit(){
    $(this.el.nativeElement).datepicker({
      changeMonth: this.changeMonth,
      yearRange: "1:100",
      changeYear: this.changeYear
    }).on('change', e => this.onChange(e.target.value));
  }

  onChange: Function = () => {};

  onTouched: Function = () => {};

  writeValue(val: string) : void {
    this.value = val;
  }

  registerOnChange(fn: Function): void {
    this.onChange = fn;
  }

  registerOnTouched(fn: Function): void {
    this.onTouched = fn;
  }
}

发生的情况是，即使我选择一个日期(选择器)或直接在输入字段中输入它，它也不会更新touched"属性.

What is happening is that even when I select a date (picker) or type it directly on input field, it isn't updating "touched" property.

你有什么修复它的想法吗?

Do you have any ideas for fixing it?

推荐答案

对于那些最终遇到同样问题的人，我想出了一种方法来管理它，如下所示:

For those who eventually have the same problem, I figured out a way to manage it, as you can below:

import {Directive, ElementRef, Input, forwardRef} from '@angular/core';
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from "@angular/forms";

declare  var $:any;

export const CUSTOM_INPUT_DATE_PICKER_CONTROL_VALUE_ACCESSOR: any = {
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => DatePickerDirective),
  multi: true
};

@Directive({
  selector: '[date-picker]',
  host: {'(blur)': 'onTouched($event)'},
  providers: [CUSTOM_INPUT_DATE_PICKER_CONTROL_VALUE_ACCESSOR]
})
export class DatePickerDirective implements ControlValueAccessor {
  private innerValue: string;

  @Input('changeMonth') changeMonth:boolean = true;
  @Input('changeYear') changeYear:boolean = true;

  constructor(private el: ElementRef) {
    $(this.el.nativeElement).datepicker({
      changeMonth: true,
      changeYear: true,
      dateFormat: 'dd/mm/yy'
    }).on('change', e => this.onChange(e.target.value));
  }

  public onChange: any = (_) => { /*Empty*/ }
  public onTouched: any = () => { /*Empty*/ }

  get value(): any {
    return this.innerValue;
  };

  //set accessor including call the onchange callback
  set value(v: any) {
    if (v !== this.innerValue) {
      this.innerValue = v;
      this.onChange(v);
    }
  }

  writeValue(val: string) : void {
    this.innerValue = val;
  }

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

  registerOnTouched(fn: any): void {
    this.onTouched = fn;
  }
}

这篇关于实现 ControlValueAccessor 的 Angular 2 指令不会在更改时更新“触摸"属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！