角度2は、ある日付入力が他の日付入力と同じかそれより前であることを確認します

Question

2つの入力が2つの角度2のブートストラップdatepickersによって設定されています。 startDateの後に（endDateの場合は）FormGroupに対応するボタンを無効にします。今すぐendDateより後のstartDateを選択すると、送信ボタンは有効のままです。しかし、2番目のカレンダボタンをクリックして2番目の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; 
    } 

このplunkerができます

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

・ホープ制御し、有効でない場合は、無効の場合はを返します。

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の変数を設定することができます。これにより、エラーメッセージが次のようにトリガされます。 plunker example