disabled property of mat-datepicker-toggle not setting correctly on successive dynamic form builds

srb11 commented 6 years ago

Bug, feature request, or proposal:

Bug

What is the expected behavior?

setting disable: true/ disable: false on an input should consistently set the same property for a mat-datepicker-toggle, per documentation (see (https://v5.material.angular.io/components/datepicker/overview#disabling-parts-of-the-datepicker).

What is the current behavior?

For a dynamic form, on successive form builds, the disabled: true/ disabled: false property maintains the same state as the first build of the form (whether disabled: true, or disabled: false), while the input disables or enables correctly. For the 1st build of the form, the disabled property does set correctly.

What are the steps to reproduce?

Open the Stackblitz https://stackblitz.com/edit/ang5-matdatepickertoggle-disable-not-changing-on-formbuild?file=index.html
Note that the mat-date and mat-datepicker-toggle are both disabled (as they should be - because {disabled: true, value: undefined} was provided to instantiate the FormControl (note that value has no effect on the disabled behavior).
Click the button, which causes the form to be rebuilt, this time providing {disabled: false, value: undefined} to instantiate the FormControl (again, same behavior will be observed if a date were provided for value). Although the form is rebuilt, only the input for the date is enabled - but the mat-datepicker-toggle is still disabled. (Note that you can easily to set the value of disableMe to true (on .ts line 12) to test with the mat-datepicker-toggle in an enabled state, instead).

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

To control the disabled state of the mat-datepicker-toggle, in a consistent, repeatable manner, by setting the same property on the input element. Also to align with documentation.

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

At least: Angular 5+ Material 5+ TS 2.4+

Is there anything else we should know?

serak88 commented 5 years ago

Is this issue being worked on? I can confirm that this bug is still happening.

PowderFan87 commented 4 years ago

I have the same issue. According to the doc setting the input to disabled should disable the whole field. There is a warning in the console

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)
  });

If I use this approach then the whole field is disabled. However, according to documentation, it should also be possible to only disable the input field and keep the dropdown active, in order to only make input possible via choosing a date instead of typing it. This, however, is not the case. As soon as I add the formControlName attribute, the input field is disabled, with the same warning, even if my mat-datepicker element has disabled="false".

Right now, the documentation doesn't work for me. The only solution I have is to watch the change event and set the real form value over a function.

mmalerba commented 4 years ago

Here's an updated version of the stackblitz, still seems to have the issue: https://stackblitz.com/edit/ang5-matdatepickertoggle-disable-not-changing-on-formbui-h4sfen?file=app/app.component.ts

davidjohanssonbf commented 2 years ago

According to the Angular Material docs it is possible to disable parts of the date picker, e.g. the input field. https://material.angular.io/components/datepicker/overview#disabling-parts-of-the-datepicker

However, if the input element is bound to a reactive form control the warning below will be displayed in the console

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)
  });

I understand that this isn't a prioritized issue, but is there any way to suppress this warning for these instances?

angular / components