[英]Angular 2 Directive implementing ControlValueAccessor doesn't update 'touched' property on change
I'm trying to create my own Angular 2 Directive for Jquery UI Datepicker. 我正在尝试为Jquery UI Datepicker创建自己的Angular 2指令。 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;
}
}
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;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.