How to get users input from ngx-timepicker-field

user_13027328 0
Viewed 3068

I am new to angular and currently using v7 I am trying to change the default time of a ngx-timepicker-field when the user types in new time since the time is entered via keyboard and not with the clock face

<!-- removed classes to reduce the need to scroll/>
<div formArrayName="operatingTimes">
    <div [formGroupName]="Monday">
       <div >
           <mat-checkbox formControlName="isOpen">Monday
           </mat-checkbox>
       </div>
       <div >
            <ngx-timepicker-field [format]="24" defaultTime="08:00" formControlName="openTime">
            </ngx-timepicker-field>
       </div>

    </div>
</div>

so my question is how is the users input registered and how does one retrieve the inputted value from what the user entered

angular7 angular-material angular
3 Answers

You can use the eventEmitter timeChanged to get new data when times change manually by user input :

HTML :

<ngx-timepicker-field [format]="24" defaultTime="08:00" (timeChanged)="onChangeHour($event)">  </ngx-timepicker-field>

TS :

  onChangeHour(event){
    console.log(event);
  }
user_122730540

Another possibility is to set a local reference to the html element:

  <ngx-timepicker-field [format]="24" defaultTime="08:00" formControlName="openTime" #openTime>

Then in your corresponding typescript file, you can access the selected time as follows:

@ViewChild('openTime') openTime: NgxTimepickerFieldComponent;

public myMethod(): void {
   console.debug(this.openTime.timePickerTime); // Output current selected time here
}
user_8049690
user_130273280
Related