ng-bootstrap datepickerで入力された入力を空白にする

Question

ボタンをクリックするとポップアップする独自のng-bootstrap datepickerでそれぞれ入力される2つの入力があります。新しい日付を選択すると入力が正しく設定されますが、入力をnullまたは単に別の値に初期化したい場合は問題があります。私は自分のgetDate機能がその中に入ることを知っています、私はそれを可能にするためにそれをどのように変更するか分かりません。

スクリーンショット（日付ピッカーは、各入力の権利、入力ごとに一つにボタンのクリックで開きます）：

HTML：

<form class="form-inline"> 
    <div> 
    <div class="form-group" [ngClass]="{'has-error':!secondForm.controls['startDate'].valid && secondForm.controls['startDate'].touched}"> 
     <label>Start Date:</label> 
     <input style="width:250px" [value]="getDate('start')" class="form-control" type="text" [formControl]="secondForm.controls['startDate']"> 
    </div> 
    <div style="display:inline-block"> 
     <ngb-datepicker id="special" *ngIf="startCheck;" [(ngModel)]="startDate" (ngModelChange)="showDatePick(0)" [ngModelOptions]="{standalone: true}"></ngb-datepicker> 
    </div> 
    <button type="button" class="btn icon-calendar" (click)="showDatePick(0)"></button> 
    <div class="form-group" [ngClass]="{'has-error':!secondForm.controls['endDate'].valid && secondForm.controls['endDate'].touched}"> 
     <label>End Date:</label> 
     <input style="width:250px" [value]="getDate('end')" class="form-control" type="text" [formControl]="secondForm.controls['endDate']"> 
    </div> 
    <div style="display:inline-block"> 
     <ngb-datepicker id="special" *ngIf="endCheck;" [(ngModel)]="endDate" (ngModelChange)="showDatePick(1)" [ngModelOptions]="{standalone: true}"></ngb-datepicker> 
    </div> 
    <button type="button" class="btn icon-calendar" (click)="showDatePick(1)"></button> 
    <button type="submit" class="btn icon-search" [disabled]="!secondForm.valid"></button> 
    <span [hidden]="!secondForm.hasError('endDateLessThanStartDate')" class="alert alert-danger first">End Date must be equal to or after Start Date</span> 
    </div> 
</form> 

活字体：変更

import { Component } from '@angular/core'; 
import { FormGroup, FormBuilder, Validators } from '@angular/forms'; 
import {NgbDateStruct} from '@ng-bootstrap/ng-bootstrap'; 
import {DatePipe} from "@angular/common"; 

@Component({ 
    selector: 'calendar-pick', 
    styleUrls: ['../app.component.css'], 
    templateUrl: './calendarpick.component.html', 
    providers: [DatePipe] 
}) 

export class CalendarPickComponent { 
    public dt: NgbDateStruct; 
    public dt2: NgbDateStruct; 
    public startCheck: boolean = false; 
    public endCheck: boolean = false; 
    secondForm : FormGroup; 

    public constructor(fb: FormBuilder, private datePipe: DatePipe) { 
    this.secondForm = fb.group({ 
    'startDate' : [null, Validators.required], 
    'endDate' : [null, Validators.required] 
    }, {validator: this.endDateAfterOrEqualValidator}) 
    } 

    public getDate(dateName: string) { 
    let workingDateName = dateName + 'Date'; 
    let timestamp = this[workingDateName] != null ? new Date(this[workingDateName].year, this[workingDateName].month-1, this[workingDateName].day).getTime() : new Date().getTime(); 
    this.secondForm.controls[dateName + 'Date'].setValue(this.datePipe.transform(timestamp, 'MM/dd/yyyy')); 
    } 

    public showDatePick(selector):void { 
    if(selector === 0) { 
     this.startCheck = !this.startCheck; 
    } else { 
     this.endCheck = !this.endCheck; 
    } 
    } 

    endDateAfterOrEqualValidator(formGroup): any { 
    var startDateTimestamp, endDateTimestamp; 
    for(var controlName in formGroup.controls) { 
     if (controlName.indexOf("startDate") !== -1) { 
     startDateTimestamp = Date.parse(formGroup.controls[controlName].value); 
     } 
     if (controlName.indexOf("endDate") !== -1) { 
     endDateTimestamp = Date.parse(formGroup.controls[controlName].value); 
     } 
    } 
    return (endDateTimestamp < startDateTimestamp) ? { endDateLessThanStartDate: true } : null; 
    } 
} 

Answer 1

2行目のgetDateは、let timestamp = this[workingDateName] != null ? new Date(this[workingDateName].year, this[workingDateName].month - 1, this[workingDateName].day).getTime() : null;