Topic: Datepicker with reactive forms not working
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()),
});
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 :)
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);
}
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: MDB5 1.3.0
- Device: --
- Browser: --
- OS: --
- Provided sample code: No
- Provided link: Yes
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
jsonpipe to display the value? We tested that and it looks like the Angularjsonpipe is returning a wrong value, if you use adatepipe 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).