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.

Add comment

Arkadiusz Idzikowski staff answered 6 years ago

0 0 Best answer

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.

Add comment

Write

Create snippet

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

About author

dimitribocquet

Pro User

126Support score
12Questions 6Answers

0Snippets likes 0Snippets