How to disable the mdb-time-picker in reactive forms


Topic: How to disable the mdb-time-picker in reactive forms

Frank Kreutzer asked 4 years ago

How would I go about to disable the mdb-time-picker in reactive forms?


Arkadiusz Idzikowski staff commented 4 years ago

Did you try to use this syntax?

new FormControl({ value: null, disabled: true });


Frank Kreutzer commented 4 years ago

We tried using that syntax on the fields respectively:

startTime: new FormControl({ value: null, disabled: true }),
endTime: new FormControl({ value: null, disabled: true }),

But what happens is that the functionality and the disabled styled appearance does not get applied to those fields.

Is there a way that the fields can be disabled/enabled programmatically? As an example we have the following code, which doesn't toggle the disabled state at all:

if (isAllDayEvent) {
    this.eventModalForm.controls.startTime.disable();
    this.eventModalForm.controls.endTime.disable();
  } else {
    this.eventModalForm.controls.startTime.enable();
    this.eventModalForm.controls.endTime.enable();
  }

We can use the [disabled]="true" directive, but then we get the Angular warning in the console about using it on a reactive form. Just looking to use the appropriate syntax.


Arkadiusz Idzikowski staff commented 4 years ago

It looks like there is a bug in the component code responsible for handling reactive forms methods. We will take a closer look at that and let you know what we found. For now please use the disabled input of the component.


Schermbecker commented 4 years ago

Would be nice if this feature is implemented. Chrome dev console throws warnings in case you use disabled attribute in reactive forms but it works.


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: 8.10.1
  • Device: PC
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No