Angular 4 получить значение ввода (timepicker) onBlur (focusOut) - PullRequest
Новая
       19

Angular 4 получить значение ввода (timepicker) onBlur (focusOut)

0 голосов
/ 17 мая 2018

У меня есть два поля времени, но я не могу получить их значения для сравнения. Все, что я получаю, это 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>

1 Ответ

0 голосов
/ 26 мая 2018

Что я в итоге делаю:

мой .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>

Возможно, есть лучший вариант, но это работает дляя.

...