ngx-material-timepicker icon indicating copy to clipboard operation
ngx-material-timepicker copied to clipboard

Reactive forms & default value

Open exitlol opened this issue 4 years ago • 4 comments

Is there a way to pass the desired default date value to the component with reactive forms? Also I have this erron logged to the console:

ERROR TypeError: time.split is not a function at Function.parseTime (ngx-material-timepicker.js:139) at Function.formatTime (ngx-material-timepicker.js:148) at TimepickerDirective.set value [as value] (ngx-material-timepicker.js:716) at TimepickerDirective.writeValue (ngx-material-timepicker.js:753) at setUpControl (forms.js:2603) at FormGroupDirective.addControl (forms.js:6359) at FormControlName._setUpControl (forms.js:7010) at FormControlName.ngOnChanges (forms.js:6933) at checkAndUpdateDirectiveInline (core.js:27784) at checkAndUpdateNodeInline (core.js:38472)

exitlol avatar Apr 07 '20 11:04 exitlol

It does work with reactive forms. Could you provide your code snippet ?

Agranom avatar Apr 09 '20 06:04 Agranom

I think @exitlol and I are having the same problem. I'll let @Agranom decide if it's necessary to open a new issue...

@exitlol, are you using the MatMomentDateModule from '@angular/material-moment-adapter'? I am. I'm seeing the problem you describe when I then create my reactive form in this manner:

  public filterForm = this.formBuilder.group({
    service: '',
    from: moment().subtract('10', 'minutes'),
    to: moment(),
    test: '11:11am'
  });

As you can see I'm using moment to give the defaults for the form for the from and to fields.

<ngx-timepicker-field formControlName="from"></ngx-timepicker-field>

When adding the ngx-timepicker-field as shown I get this error. I added a third field, test, so that I could verify that a standard JS Date would work:

<ngx-timepicker-field formControlName="test"></ngx-timepicker-field>

Does not error, however, it does not appear to be defaulting the control to the time that I set.

Feature Request

Make the controls/components use the 'DateAdapter/MAT_DATE_FORMATS' provider. Doing this the controls/components can then respect MatNativeDateModule or MatMomentDateModule. By doing this the controls should be date implementation agnostic.

mikejr83 avatar Apr 23 '20 19:04 mikejr83

Timepiked doesn't accept time in moment format. You should use String (ex. 11:11 am) or luxon formats

Agranom avatar May 11 '20 15:05 Agranom

Had the same error but, in my case, I was providing an array instead of a string when updating the form:

this.form.setValue({
    time: ['06:00 AM'],
)};

So I had to change the above to:

this.form.setValue({
    time: '06:00 AM',
)};

nunoarruda avatar Nov 13 '20 17:11 nunoarruda