Угловой 2 подтвердите, что один ввод даты равен или перед другим

Question

У меня есть два входа, которые заполнены двумя Угловыми 2 Bootstrap datepickers. Я хочу, чтобы моя кнопка соответствовала FormGroup для отключения, если startDate после (не раньше или равно) endDate. Прямо сейчас, если я выберу startDate, который позже endDate, кнопка отправки остается включенной. Но если я затем щелкнул вторую кнопку календаря, чтобы всплыть второй datepicker, кнопка отправки будет отключена (мне фактически не нужно выбирать endDate). Я проверил с консолью, и startDate, endDate и error все меняются и меняются на правильные значения в правильное время без ошибок, это просто отключение кнопки отправки, которая отключена «синхронизация».

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

корреспондент Машинопись:

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

} 

Answer 1

Вы можете определить собственный валидатор и назначить его в виде группы в целом, как так:

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

Это будет проверять отметки времени управление и возврат что-то, если оно недействительно и null, если оно действительно.

this.secondForm = fb.group({ 
    'startDate' : ['', Validators.required], 
    'endDate' : ['', Validators.required] 
    }, 
    {validator: this.endDateAfterOrEqualValidator}); 

Я полагаю, что если вы не собираетесь добавлять какие-либо дополнительные элементы управления можно жёстко назначений меток времени вместо того, чтобы проверить элементы управления для значений, которые вы хотите.

Plunker: http://plnkr.co/edit/Yow6DMd2soBXwJ2oGOFu?p=preview

Answer 2

Для моего выбора дат компонента Я использовал этот код в качестве валидатора.

if(this.dateFrom && this.dateTo) { 

    var d1 = Date.parse(this.dateTo); 
    var d2 = Date.parse(this.dateFrom); 

     if (d1 > d2) { 
      this.error = true; 
     } 
} 

Это должно работать для вас, если оно находится в стандартном формате javascript или в момент даты. Также в операторе , если вы указали, вы можете установить переменную error = true, и это приведет к появлению сообщения об ошибке следующим образом.

<button [disabled]="error"></button> 

Надежда это plunker помогает: plunker example