Angular 2 validate that one date input is equal to or before another
<p>I have two inputs which are populated by two Angular 2 Bootstrap <code>datepickers</code>. I want my button that corresponds to the <code>FormGroup</code> to be disabled if <code>startDate</code> is after (not before or equal to) <code>endDate</code>. Right now if I choose a <code>startDate</code> that is later than <code>endDate</code> the submit button stays enabled. But if I then click the second calendar button to get the second <code>datepicker</code> to pop up, the submit button becomes disabled (I don't actually have to choose the <code>endDate</code>). I checked with the console and <code>startDate</code>,<code>endDate</code>, and <code>error</code> are all changing and changing to the correct values at the correct times with no errors, it's just the disabling of the submit button that has off "timing".</p>

<pre><code>&lt;form class="form-inline"&gt;
&lt;div&gt;
&lt;div class="form-group" [ngClass]="{'has-error':!secondForm.controls['startDate'].valid &amp;&amp; secondForm.controls['startDate'].touched}"&gt;
  &lt;label&gt;Start Date:&lt;/label&gt;
  &lt;input style="width:250px" [value]="getDate('start')" class="form-control" type="text" [formControl]="secondForm.controls['startDate']"&gt;
&lt;/div&gt;
&lt;div style="display:inline-block"&gt;
  &lt;ngb-datepicker id="special" *ngIf="startCheck;" [(ngModel)]="startDate" (ngModelChange)="showDatePick(0)" [ngModelOptions]="{standalone: true}"&gt;&lt;/ngb-datepicker&gt;
&lt;/div&gt;
&lt;button type="button" class="btn icon-calendar" (click)="showDatePick(0)"&gt;&lt;/button&gt;
&lt;div class="form-group" [ngClass]="{'has-error':!secondForm.controls['endDate'].valid &amp;&amp; secondForm.controls['endDate'].touched}"&gt;
  &lt;label&gt;End Date:&lt;/label&gt;
  &lt;input style="width:250px" [value]="getDate('end')" class="form-control" type="text" [formControl]="secondForm.controls['endDate']"&gt;
&lt;/div&gt;
&lt;div style="display:inline-block"&gt;
  &lt;ngb-datepicker id="special" *ngIf="endCheck;" [(ngModel)]="endDate" (ngModelChange)="showDatePick(1)" [ngModelOptions]="{standalone: true}"&gt;&lt;/ngb-datepicker&gt;
&lt;/div&gt;
&lt;button type="button" class="btn icon-calendar" (click)="showDatePick(1)"&gt;&lt;/button&gt;
&lt;button type="submit" class="btn icon-search" [disabled]="!secondForm.valid || error==true"&gt;&lt;/button&gt;
&lt;/div&gt;
&lt;/form&gt;
</code></pre>

<p>Corresponding Typescript:</p>

<pre><code>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) =&gt; {
    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 &gt; endDt) {
  this.error = true;
}else {
  this.error = false;
}
}

}
</code></pre>