Angular 4 获取输入值 (timepicker) onBlur (focusOut)

Question

我有两个时间字段，但无法获取它们的值来比较它们。我得到的只是 undefined！我想在字段离开时立即获取值（focusout）。
这是我的 .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>

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

Angular 4 获取输入值 (timepicker) onBlur (focusOut)

Angular 4 get value of input (timepicker) onBlur (focusOut)

compare

onblur

timepicker

angular

angular-reactive-forms