Open srb11 opened 6 years ago
Is this issue being worked on? I can confirm that this bug is still happening.
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.
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
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?
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
andmat-datepicker-toggle
are both disabled (as they should be - because{disabled: true, value: undefined}
was provided to instantiate the FormControl (note thatvalue
has no effect on thedisabled
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 forvalue
). 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 ofdisableMe
totrue
(on .ts line 12) to test with themat-datepicker-toggle
in anenabled
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 theinput
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?