MDB-TimePicker Disable


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.) chrome console log![][1]


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.


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue
  • 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