search

Agranom / ngx-material-timepicker

Material desing timepicker for Angular 6.0+
https://agranom.github.io/ngx-material-timepicker/
MIT License
342 stars 139 forks source link

document usage of (timeSet) with <ngx-timepicker-field> #169

Closed robert-king closed 5 years ago

robert-king commented 5 years ago

I can use timeSet with ngx-material-timepicker


<mat-form-field>
      <input aria-label="default time"
             matInput
             [ngxTimepicker]="defaultValue" [value]="'9:00 am'"  readonly>
      <ngx-material-timepicker
        (timeSet)="setTime($event)"
        #defaultValue>
      </ngx-material-timepicker>
    </mat-form-field>

but it doesn't work with ngx-timepicker-field

<div>
      <ngx-timepicker-field
        #defaultValue
        (timeSet)="setTime($event)"
        [format]="24"
        [defaultTime]="'12:00'"></ngx-timepicker-field>
    </div>

Not sure how it's supposed to be setup after looking through https://agranom.github.io/ngx-material-timepicker/

Agranom commented 5 years ago

ngx-timepicker-field doesn't have any outputs

leochen0818 commented 5 years ago

@robert-king ngx-timepicker-field implement the ControlValueAccessor, so you can use reactive-form binding it

robert-king commented 5 years ago

thanks after some experimenting I got it working, it just means formControl is an input as usual:

ctrl = new FormControl();

and

<div>
      <ngx-timepicker-field
        [formControl]="ctrl"
        [format]="24"
        [defaultTime]="'12:00'"></ngx-timepicker-field>
    </div>
    <div>
      {{ctrl.value}}
    </div>

if anyone' interested it's explained at the bottom of this tutorial:

https://blog.angularindepth.com/never-again-be-confused-when-implementing-controlvalueaccessor-in-angular-forms-93b9eee9ee83

<ngx-jquery-slider [formControl]="ctrl"></ngx-jquery-slider>