Angular：从引导日期选择器绑定到基础ngModel或formControlName

Question

我使用bootstrap-datepicker在我的Angular项目中创建它作为指令。以下是我的代码。

HTML： <input [datepicker]="datepickerConfig" readonly ngModel name="requestedDate" class="form-control" id="requestedDate" type="text">

日期选择器配置在组件：

datepickerConfig = { 
    format: 'dd-M-yyyy' 
}; 

指令：

@Directive({ selector: '[datepicker]' }) 
export class DatepickerDirective implements OnInit { 
    @Input() datepicker; 

    constructor(private el: ElementRef) { } 

    ngOnInit() { 
     $(this.el.nativeElement).datepicker(this.datepicker); 
     $(this.el.nativeElement).next('.input-group-addon').find('.glyphicon-calendar') 
      .click(() => $(this.el.nativeElement).focus()); 
    } 

} 

如果我专注于文本框，我已经应用了指令，该日期选择器弹出，当我选择一个日期时，它显示在文本框中。但它没有被绑定到底层ngModel/formControlName。相应的变量仍然是undefined。

请帮我这个。

Answer 1

我用ControlValueAccessor做了。以下是我的实施。

import { Directive, ElementRef, Input, OnInit, HostListener, forwardRef } from '@angular/core'; 
import { DatePipe } from '@angular/common'; 
import 'bootstrap-datepicker'; 
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; 

@Directive({ 
    selector: '[datepicker]', 
    providers: [ 
     { 
      provide: NG_VALUE_ACCESSOR, 
      useExisting: forwardRef(() => DatepickerDirective), 
      multi: true 
     }, 
     DatePipe 
    ] 
}) 
export class DatepickerDirective implements OnInit, ControlValueAccessor { 
    @Input() datepicker; 

    constructor(private el: ElementRef, private datePipe: DatePipe) { } 

    ngOnInit() { 
     $(this.el.nativeElement).datepicker(this.datepicker); 
     $(this.el.nativeElement).next('.input-group-addon').find('.glyphicon-calendar') 
      .click(() => $(this.el.nativeElement).focus()); 
    } 

    // ControlValueAccessor interface 
    private _onChange = (_) => { }; 
    private _onTouched =() => { }; 

    @HostListener('blur', ['$event']) 
    input(event) { 
     this._onChange(event.target.value); 
     this._onTouched(); 
    } 
    writeValue(value: any): void { 
     $(this.el.nativeElement).val(this.datePipe.transform(value, 'dd-MMM-yyyy')); 
    } 

    registerOnChange(fn: (_: any) => void): void { this._onChange = fn; } 
    registerOnTouched(fn: any): void { this._onTouched = fn; } 

}