Angular 4 获取输入值 (timepicker) onBlur (focusOut) [英] Angular 4 get value of input (timepicker) onBlur (focusOut)

问题描述

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

I have two time fields but I can't get their values to compare them. All I get is undefined! I want to get the value as soon as the field is left (focusout).
Here is my .ts code:

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 代码:

Here is my .html code:

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

推荐答案

我最终在做什么:

我的 .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 代码

my .html code

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

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

There might be a better option but this works for me.

这篇关于Angular 4 获取输入值 (timepicker) onBlur (focusOut)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！