각도 : bootstrap-datepicker에서 기본 ngModel 또는 formControlName으로 가져온 바인딩 날짜

Question

각도 프로젝트에서 지시문으로 생성하여 bootstrap-datepicker을 사용하고 있습니다. 아래는 제 코드입니다.

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

}