Topic: Datepicker can't be disabled on reactive form
I am trying to disable datepicker on a reactive form, but only input is disabled. User still can click on a toggle and select date on the disabled datepicker. It use to work correctly in MDB4. How to fix it? Thanks.
HTML:
<mdb-form-control>
<input
formControlName="csaDueDate"
mdbInput
[mdbDatepicker]="dpCsaDueDate"
type="text"
class="form-control"
id="icsaDueDate"
/>
<label mdbLabel for="icsaDueDate" class="form-label">Due Date</label>
<mdb-datepicker-toggle [mdbDatepicker]="dpCsaDueDate"></mdb-datepicker-toggle>
<mdb-datepicker #dpCsaDueDate [inline]="true" [format]="formatDate"></mdb-datepicker>
</mdb-form-control>
TS:
this.scheduleForm = this.fb.group({
csaDueDate: [],
});
get csaDueDate(): AbstractControl {
return this.scheduleForm.get('csaDueDate')!;}
this.csaDueDate.disable();
You can disable the toggle component by setting its disabled input to true:
<mdb-datepicker-toggle [mdbDatepicker]="datepicker" [disabled]="true"></mdb-datepicker-toggle>
The toggle should probably inherit the disabled state from the input by default. I added a new task and we will take a closer look at that.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: MDB5 3.0.0
- Device: Desktop
- Browser: Chrome
- OS: W10
- Provided sample code: No
- Provided link: No