question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Reactions:14
  • Comments:14 (2 by maintainers)

github_iconTop GitHub Comments

5reactions
jelbourncommented, Nov 4, 2016

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

5reactions
tomwanzekcommented, Oct 25, 2016

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

angular - What actually triggers ControlValueAccessor's ...
When the form control bound to this component has its disabled state toggled the 'setDisabledState' function will be called.
Read more >
Don't reinvent the wheel when implementing ... - Medium
Here we use @ViewChild to get hold of formControlDirective that is automatically bound to text input with formControl directive, and it's field ...
Read more >
How To Use ControlValueAccessor to Create Custom Form ...
Disable the input - setDisabledState. These four things make up the ControlValueAccessor interface, the bridge between a form control and a ...
Read more >
ControlValueAccessor - Angular
Function that is called by the forms API when the control status changes to or from 'DISABLED'. Depending on the status, it enables...
Read more >
Angular Custom Form Controls - Complete Guide
Build a fully functional custom form control, compatible with template-driven and reactive forms, as well as with all built-in and custom ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found