Angular: Bind-Datum aus Bootstrap-Datepicker zu zugrunde liegenden ngModel oder FormControlName

Question

Ich verwende bootstrap-datepicker in meinem Angular-Projekt, indem Sie es als eine Richtlinie erstellen. Unten ist mein Code.

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

Datumsauswahl config in Komponente:

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

Richtlinie:

@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()); 
    } 

} 

Wenn ich auf das Textfeld konzentrieren, auf die ich diese Richtlinie angewendet haben, die Datepicker erscheint, und wenn ich ein Datum auswähle, wird es in der Textbox angezeigt. Aber es wird nicht an den zugrunde liegenden ngModel/formControlName gebunden. Die entsprechende Variable ist immer noch undefined.

Bitte helfen Sie mir dabei.

Answer 1

Ich tat es mit ControlValueAccessor. Unten ist meine Implementierung.

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; } 

}