Angular 4 在 Blur (focusOut) 上获取输入值(时间选择器)

Question

我有两个时间字段，但我无法获得它们的值来比较它们。我得到的只是undefined！我想在字段离开后立即获取值(焦点(。
这是我的.ts代码：

isMeridian = false;
showSpinners = false;
timeStart: any;
timeSegment: any;   
onKeyTime(event) {
console.log("onKeyTime :" + this.mySummaryForm.value.startTime);
this.timeStart = this.mySummaryForm.value.startTime;   //event.target.value;
console.log("select+++startTime : " + this.timeStart);
console.log("change+++segTime : " + this.timeSegment);
}
onKeySeg(event) {
console.log("onKeySeg : " + this.mySummaryForm.value.segmentTime3);
this.timeSegment = this.mySummaryForm.value.segmentTime3;
console.log("select---startTime : " + this.timeStart);
console.log("change---segTime : " + this.timeSegment);
}
checkTimeValue() {
console.log("checkTimeValue :");
if((this.timeSegment < this.timeStart)) {
console.log("a : " + this.timeSegment  + " > " + this.startTime);   
// alert("good choice!");
}
else {
console.log("b : " + this.startTime  + " < " + this.timeSegment);
// alert("time segment should be later than start time.");
}
}

这是我的.html代码：

<form [formGroup]="mySummaryForm" (ngSubmit)="submitMe(mySummaryForm)">    
<label for="startTime"> Start time :      {{mySummaryForm.value.startTime |date: 'shortTime' | json}} 
<timepicker formControlName="startTime" (ngModel)="startTime" [showMeridian]="isMeridian" [showSpinners]="showSpinners" (keyup)="onKeyTime($event)" (ngModelChange)="onChange($event)" #startTime required></timepicker>
</label> 
<label for="segmentTime3">Segment time : {{mySummaryForm.value.segmentTime3  |date: 'shortTime' | json}}
<timepicker formControlName="segmentTime3" (ngModel)="segmentTime3" [showMeridian]="isMeridian" [showSpinners]="showSpinners" (keyup)="onKeySeg($event)" (focusout)="checkTimeValue()" (ngModelChange)="onChange($event)" #segmentTime3 required></timepicker>
</label>                   

Answer 1

我最终做了什么：

我的 .ts 代码

onChangeStart(event, label) {
console.log("EVENT : " + event);    
if (label == 'start_time')  {
this.timeStart = event;
}
}
onChangeSeg(event, label, index) {
if (label == 'segmentTime3')  {
this.timeSegment = event;
console.log("this.timeSegment : " + this.timeSegment);
}
if (this.timeSegment > this.timeStart) {
console.log(this.timeSegment + " > " +this.timeStart);
}
else {
console.log(this.timeSegment + " < " +this.timeStart);
alert("the segment time is wrong ! The segment time should be later than the start time. ");
}
}   

我的.html代码

<label for="startTime"> Start time :  
<timepicker formControlName="start_time" (ngModel)="start_time" [showMeridian]="isMeridian" [showSpinners]="showSpinners" (ngModelChange)="onChangeStart($event, 'start_time')" #start_time required></timepicker>
</label> 
<label for="segmentTime3">Segment time : 
<timepicker formControlName="segmentTime3" (ngModel)="segmentTime3" [showMeridian]="isMeridian" [showSpinners]="showSpinners" (ngModelChange)="onChangeSeg($event, 'segmentTime3', i)" #segmentTime3 required></timepicker>
</label>  

可能有更好的选择，但这对我有用。