disabling mdb-date-picker in reactive form


Topic: disabling mdb-date-picker in reactive form

dimitribocquet pro asked 6 years ago

Hello,   When I do this code :
<mdb-date-picker #finishAtPicker id="finish_at" name="finish_at" formControlName="finish_at" [locale]="'fr'" [disabled]="true" placeholder="Finish At"></mdb-date-picker>
I have this warning :
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.

Example: 
form = new FormGroup({
first: new FormControl({value: 'Nancy', disabled: true}, Validators.required),
last: new FormControl('Drew', Validators.required)
});
So I try to disable my date-picker as recommends this warning message, but it's not disabled.
this.modalForm = _fb.group({
name: ['', Validators.required],
start_at: ['', Validators.required],
finish_at: [{value: '', disabled: true}],
});
Could you help me? Thank you.

Arkadiusz Idzikowski staff answered 6 years ago

Dear dimitribocquet, Thank you for reporting this problem, we will take a closer look at it. For now please use [disabled]="true" input. Regards, Arek

Olivier Flegeau commented 5 years ago

Is it ok now ? I don't think so ? The problem is that I have a warning message due to I'm using reactive forms Thank you


Arkadiusz Idzikowski staff commented 5 years ago

We will check that again and make sure that everything works correctly with reactive forms.


Bartosz Termena staff commented 5 years ago

@Olivier Flegeau

Hi! Try to use [attr.disabled]="true"

Best Regards, Bartosz.


rrosales commented 5 years ago

Issue is not fixed yet, and also [attr.disabled]="true" dont takes effects with reactive forms.

Example:

            <mdb-date-picker [attr.disabled]="true" class="ml-5" [options]="myDatePickerOptions"
                [placeholder]="'delivery date'" formControlName="deliveryDate">
            </mdb-date-picker>

Arkadiusz Idzikowski staff commented 5 years ago

It looks like this issue was resolved for inline datepicker but still occur in datepicker opened as dialog. Thank you for letting us know about that, we will fix that in the next update.


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: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 6.2.3
  • Device: Mac
  • Browser: Chrome
  • OS: 10.13
  • Provided sample code: Yes
  • Provided link: No