Topic: MDB-TimePicker Disable
Aroquiassamy LA ROZE pro premium priority asked 3 years ago
Expected behavior Want to know how to disable timepicker
Actual behavior while disabling timepicker end up error as
*It looks like you're using the disabled attribute with a reactive form directive. If you set disabled to true when you set up this control in your component class, the disabled attribute will actually be set in the DOM for you. We recommend using this approach to avoid 'changed after checked' errors. *
Resources (screenshots, code snippets etc.)
akrolis pro answered 3 years ago
It's not pretty, but this workaround works for me:
html:
<form [formGroup]="TimeForm">
<div class="md-form">
<input
mdbInput
type="text"
id="form1"
class="form-control"
formControlName="timeinput"
[mdbTimePicker]="timepicker"
readonly
/>
<label for="form1">Example label</label>
<mdb-timepicker-toggle
[mdbTimePickerToggle]="timepicker"
*ngIf="input.enabled"
></mdb-timepicker-toggle>
<mdb-timepicker #timepicker></mdb-timepicker>
ts:
TimeForm: FormGroup;
ngOnInit() {
this.TimeForm = new FormGroup({
timeinput: new FormControl(null)
});
this.input.disable()
}
get input() { return this.TimeForm.get('timeinput'); }
Arkadiusz Idzikowski staff answered 3 years ago
@Aroquiassamy LA ROZE This feature is currently not available in the timepicker component. We will take a closer look and add a fix.
This message is only a warning and it should not break your app compilation.
Edit:
We made some tests and it looks like everything is working correctly. Please make sure that you added mdbInput
directive to the input element. This directive allows using [disabled]
input and blocking the input control using reactive forms (recommended in this case):
For example:
this.TimeForm = new FormGroup({
timeinput: new FormControl({ value: null, disabled: true })
});
Arkadiusz Idzikowski staff commented 3 years ago
@Aroquiassamy LA ROZE @akrolis We checked everything and it looks like this feature is working without a problem when you use the correct syntax. Please see my edited answer.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Pro
- Premium support: Yes
- Technology: MDB Angular
- MDB Version: MDB4 9.4.0
- Device: Lenovo Ideapad Gaming 3
- Browser: Chrome,Edge
- OS: Windows OS 10
- Provided sample code: No
- Provided link: No