Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
RoxKilly opened this issue Sep 3, 2016 · 14 comments · Fixed by #1750
Assignees
Labels
P2 The issue is important to a large percentage of users, with a workaround

Comments

@RoxKilly
Copy link

RoxKilly commented Sep 3, 2016

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:
6

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
Copy link

aminebizid commented Sep 9, 2016

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

@corey-waymark
Copy link

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

@tomwanzek
Copy link

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
Copy link

mhautman commented Oct 4, 2016

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
Copy link

rbaumi commented Oct 11, 2016

+1

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

@csabattilas
Copy link

There is ? which means that it is optional

@csabattilas
Copy link

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
Copy link

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

@jelbourn jelbourn added the P2 The issue is important to a large percentage of users, with a workaround label Nov 4, 2016
@jelbourn jelbourn assigned crisbeto and unassigned mmalerba Nov 4, 2016
@jelbourn
Copy link
Member

jelbourn commented Nov 4, 2016

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

@crisbeto crisbeto added the has pr label Nov 6, 2016
crisbeto added a commit to crisbeto/material2 that referenced this issue Nov 6, 2016
… from ControlValueAccessor

Implements the `setDisabledState` method from the `ControlValueAccessor` interface in all of the input-related components, in order to support disabling via reactive forms. Note that the `select` component is missing the implementation, however there's a pending PR for it already (angular#1667).

Fixes angular#1171.
crisbeto added a commit to crisbeto/material2 that referenced this issue Nov 9, 2016
… from ControlValueAccessor

Implements the `setDisabledState` method from the `ControlValueAccessor` interface in all of the input-related components, in order to support disabling via reactive forms. Note that the `select` component is missing the implementation, however there's a pending PR for it already (angular#1667).

Fixes angular#1171.
@RoxKilly
Copy link
Author

RoxKilly commented Nov 16, 2016

@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
Copy link
Member

The fix hasn't been merged yet @RoxKilly.

crisbeto added a commit to crisbeto/material2 that referenced this issue Nov 19, 2016
… from ControlValueAccessor

Implements the `setDisabledState` method from the `ControlValueAccessor` interface in all of the input-related components, in order to support disabling via reactive forms. Note that the `select` component is missing the implementation, however there's a pending PR for it already (angular#1667).

Fixes angular#1171.
@denbezrukov
Copy link

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

got this issue with checkbox. Any help?

@RoxKilly
Copy link
Author

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

tinayuangao pushed a commit that referenced this issue Nov 29, 2016
… from ControlValueAccessor (#1750)

Implements the `setDisabledState` method from the `ControlValueAccessor` interface in all of the input-related components, in order to support disabling via reactive forms. Note that the `select` component is missing the implementation, however there's a pending PR for it already (#1667).

Fixes #1171.
@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 5, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
P2 The issue is important to a large percentage of users, with a workaround
Projects
None yet