Datepicker with reactive forms not working


Topic: Datepicker with reactive forms not working

shellxsoftware asked 3 years ago

Expected behavior When i change the date in the datepicker, the form is not updated.

I have tried to put the formControlName attribute inside the mdb-datepicker tag but then i get this error: core.js:6498 ERROR Error: No value accessor for form control with name: 'dateArticle'

Actual behaviorhttps://i.gyazo.com/56b2e19349dd3e93891a6556d8b57af0.mp4

Resources (screenshots, code snippets etc.)

            <mdb-form-control>
          <input mdbInput [mdbDatepicker]="dateArticle" type="text" class="form-control"
            id="actualite_datepicker_dateArticle" name="dateArticle" formControlName="dateArticle" />
          <label mdbLabel for="actualite_datepicker_dateArticle" class="form-label">Date de l'article</label>
          <mdb-datepicker-toggle [mdbDatepicker]="dateArticle"></mdb-datepicker-toggle>
          <mdb-datepicker [inline]="true" #dateArticle></mdb-datepicker>
        </mdb-form-control>

  public form = this.fb.group({
      dateArticle: new FormControl(new Date()),
  });

Arkadiusz Idzikowski staff commented 3 years ago

@shellxsoftware In the video you provided it looks like the value is updated but the day part is incorrect. Do you use json pipe to display the value? We tested that and it looks like the Angular json pipe is returning a wrong value, if you use a date pipe or subscribe to the form control value changes and use console.log, then you should get the correct value.


shellxsoftware commented 3 years ago

damn yeah you're right. thanks!


shellxsoftware commented 3 years ago

in fact it is a problem of timezone. the value shown as json basically shows one hour earlier (which is in my case the day before the one selected).


barmic pro premium priority answered 3 years ago

I sort of had the same issue where the underlying data was not updated... I've took some time and went on diving into MDBootstrap code, and saw that my issue came from the fact the my updateOn option was set to 'blur' and if I only used the button to open the picker and the input part never got focused (thus the blur event never fired) the data wasn't updated. Once I've changed the updateOn to 'change', the above scenario worked smoothly. Hope this helps someone down the road... I am not sure if this behavior is expected since I was treating the datepicker as a whole and i would expect the blur options to work as well :)


Arkadiusz Idzikowski staff answered 3 years ago

I'm afraid we won't be able to do anything with how the onBlur option works, but you can always use the datepicker component dateChanged event to listen to a date change:

<mdb-datepicker (dateChanged)="onDateChange($event)" #datepicker></mdb-datepicker>

then:

  onDateChange(event: Date) {
    console.log('date change', event);
  }

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: MDB5 1.3.0
  • Device: --
  • Browser: --
  • OS: --
  • Provided sample code: No
  • Provided link: Yes