Components: [mdDatepickerToggle] still opening datepicker when input is disabled

[merlosy]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Im using:

• reactive forms
• form builder:

this.myForm = this._fb.group({
      ...
      estimatedApplicationDate: [
          { value: this.data.applicationDate, disabled: true }, 
          [Validators.required]
      ]
    });

and template:

<input mdInput formControlName="estimatedApplicationDate"
     [mdDatepicker]="estimatedApplicationDateDatepicker" 
     placeholder="Date d’application estimée" required
     (click)="estimatedApplicationDateDatepicker.open()">
<button mdSuffix [mdDatepickerToggle]="estimatedApplicationDateDatepicker"></button>
<md-datepicker #estimatedApplicationDateDatepicker></md-datepicker>

=> The input is disabled as specified, but I can still open the datepicker panel

What is the current behavior?

The datepicker icon shouldn't be clickable

What are the steps to reproduce?

Providing a Plunker (or similar) is the best way to get the team to see your issue.
Plunker template: https://goo.gl/DlHd6U (template not working, lots of 404)

What is the use-case or motivation for changing an existing behavior?

Consistency i guess

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

• angular ^4.1.0
• @angular/material 2.0.0-beta.8
• OS Windows 10
• browser: Chrome 57
• typescript ~2.3.3

Is there anything else we should know?

Work-around:

<button mdSuffix 
     [mdDatepickerToggle]="myForm.get('estimatedApplicationDate').disabled? null : estimatedApplicationDateDatepicker">
</button>

I hope this is clear enough..
Thanks!

[julianobrasil]

Have you tried disabling the md-datepicker itself?

<md-datepicker #estimatedApplicationDateDatepicker 
  [disabled]="myForm.get('estimatedApplicationDate').disabled"></md-datepicker>

[willshowell]

You can also just disable the button

<button mdSuffix [disabled]="myForm.get('estimatedApplicationDate').disabled"
     [mdDatepickerToggle]="estimatedApplicationDateDatepicker">
</button>

I feel like the button shouldn't be coupled to the form control, but could maybe understand the datepicker doing so.

[merlosy]

Hi, thanks for the replies
@julianobrasil : Your solution throw an error for me:
Can't bind to 'disabled' since it isn't a known property of 'md-datepicker'.

@willshowell : It works well! and actually cleaner than my workaround

I also agree, on the one hand it make more sense they shouldn't be coupled, but on the other hand it creates inconsistency when disabling at the FormControl level...

[julianobrasil]

There might be a problem with the docs or the component. ASAP I'll try it in a plunk.

Edited: maybe it's just decoupled as @willshowell suggested. But just throwing an error when you try to open It by clicking on the mdDatepickerToggle is strange.

[julianobrasil]

Looking quickly at the code, I can tell there _is_ a disabled property. I haven't figured out yet the reason why it apparently doesn't work as I expected,

[willshowell]

@julianobrasil it's new (https://github.com/angular/material2/pull/5305). Here's that same file at beta.8
https://github.com/angular/material2/blob/2.0.0-beta.8/src/lib/datepicker/datepicker.ts

[julianobrasil]

Oh, now it makes sense. 😸

[mmalerba]

This has been fixed, just hasn't made it into a release yet

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}