Winkel 2 überprüfen Sie, dass ein Datum eingegeben wird, gleich zu oder vor einem anderen

Ich habe zwei Eingänge, die sind bevölkert von zwei Winkel-2 Bootstrap datepickers. Ich möchte meine Taste entspricht der FormGroup deaktiviert sein, wenn startDate ist nach (nicht vor oder gleich) endDate. Gerade jetzt, wenn ich wählen Sie ein startDate ist, die später als endDate den submit-button bleibt aktiviert. Aber wenn ich dann auf die zweite Schaltfläche "Kalender", um die zweite datepicker pop-up, die senden-Schaltfläche wird deaktiviert (die ich eigentlich nicht haben, zu wählen, die endDate). Ich habe mit der Konsole und startDate,endDate, und error alle verändern und ändern, um die richtigen Werte zur richtigen Zeit mit keine Fehler, es ist nur die Deaktivierung der Schaltfläche "senden" hat off "timing".

<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 || error==true"></button>
</div>
</form>

Entsprechenden Typoskript:

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

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

export class CalendarPickComponent {
public error: boolean = false;
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' : [this.dt, Validators.required],
  'endDate' : [this.dt2, Validators.required]
})
this.secondForm.valueChanges.subscribe( (form: any) => {
    console.log('form changed to:', form);
  }
);
}

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, 'longDate'));
}

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

periodValidator(formGroup:FormGroup) {
let s = new Date(formGroup.value.startDate);
let e = new Date(formGroup.value.endDate);
let stDt = moment(s);
let endDt = moment(e);
if (stDt > endDt) {
  this.error = true;
}else {
  this.error = false;
}
}

}