Components: [input @alpha.8-1] Setting bound FormControl to disabled causes valueAccessor.setDisabledState error

[RoxKilly]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Angular recommends, when using reactive forms, to set disabled on the FormControl rather than the input element in the template:

What is the current behavior?

Setting disabled: true on a FormControl bound to md-input will cause the app to crash with error:

TypeError: this.valueAccessor.setDisabledState is not a function

This does not happen to the native text input.

What are the steps to reproduce?

Open this plunker and look at the console. If in AppComponent you replace:

nameCtrl = new FormControl({value:'Jane', disabled:true});

With

nameCtrl = new FormControl('Jane');

The error will go away

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

Angular 2 rc 6 with Material alpha 8.1

[aminebizid]

@kara Help please
this.valueAccessor.setDisabledState is not a function

[corey-waymark]

I'm seeing this with md-checkbox too, so I would assume it is a wider angular2-material issue.

[tomwanzek]

The issue still occurs, and ,unfortunately, leaves the md-input unusable in a purely reactive setting requiring state-driven disabling/enabling.

It reproduces on angular-cli beta.16 with material2 alpha.9-3.

To add on to the above, the same applies, when using the .disable(), method on a FormGroup element, which wraps the md-input elements.

Thanks in advance.

[mhautman]

Here is a work around that works for me:

this.form.controls['val1'].statusChanges.subscribe((newStatus) => {
let val2 = this.form.controls['val2'];

if (newStatus === VALID) {
val2.enable();
} else {
val2.disable();
}
}

[rbaumi]

+1

Interface ControlValueAccessor has now one more method that has to be implemented: setDisabledState in the angular2-material and it is missing now!

[csabattilas]

There is ? which means that it is optional

[csabattilas]

It looks if I use [disabled] on the md-radio-group even if it exposes a disabled Input I get the warning above. So this means that I cannot hook the md-radion-group to a model driven form group and use the disabled attribute of the radio group?

[tomwanzek]

Is there any update on getting proper programmatic disabling to work for use with reactive forms?

[jelbourn]

@crisbeto we should add setDisabledState to all of our forms components

[RoxKilly]

@crisbeto, @jelbourn The error I originally reported is no longer raised on alpha 10, but setting disabled=true on a reactive form control fails to disable the md-input

See this plunk

[crisbeto]

The fix hasn't been merged yet @RoxKilly.

[Dominionys]

"angular-cli": "1.0.0-beta.16"
material": "^2.0.0-alpha.10"

got this issue with checkbox. Any help?

[RoxKilly]

@Dominionys The two posts immediately before yours show that the issue was not fixed in time for alpha 10.

[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._}