Inputs are always reading the disabled state from the form control

[amcdnl]

Bug, feature request, or proposal:

Inputs are always reading the disabled state from the form control.

What is the expected behavior?

The input would be disabled.

What is the current behavior?

The input is not being disabled

What are the steps to reproduce?

https://plnkr.co/edit/WRdgmjdwsLwy9Fx2XRqG?p=preview

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

2.0.0-beta.7

[jelbourn]

@kara what is the right way for the disabled state to work here?

[amcdnl]

Note: Angular actually notifies you 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)
      });

[julianobrasil]

@amcdnl, shouldn't you be doing something like

(change)="stateCtrl.enabled ? stateCtrl.disable() : stateCtrl.enable()"

in the <md-slide-toggle> instead of trying to use the [disabled] attribute in the <input> (as adviced in the console, because it's a reactive form control)?

[willshowell]

@amcdnl in addition, see @kara's comment here #2667 (comment)

In short, the behavior is right in that the control should always take precedence over the disabled property. Otherwise, if you disable the control programmatically without setting the disabled property (as is typical of reactive form pattern), the input will not pick up the new disabled state.

[kara]

I can't get the plunker to load for some reason, but from the comments, it sounds like you have a disabled attribute with a reactive form control and have not used form control state (new FormControl({value: '', disabled: true})) or the imperative methods to enable/disable. If that is the case, the input is working as intended. Reactive form controls set the disabled attribute for you, so there's no reason to place it there manually.

[angular-automatic-lock-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.}