Skip to content

Cannot dynamically disable/enable a form-builder control #17137

@ghost

Description

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

Added disabled attribute bound to boolean property (reactive form). Toggling the property has no effect.

There was a warning about using the disabled attribute and they provided an example:

first: new FormControl({value: 'Nancy', disabled: true}, Validators.required

Added that construct to my form (using form-builder but should be the same thing and that does not work either.

Workaround: just call enabled() or disabled() on the form control programatically. The downside is we have a mix of simple disabled attributes bound to a variable and these one-offs because these reactive forms do not work with the disabled attribute normally or as prescribed.

Expected behavior

Either binding the disabled attribute in the template or in the form-builder template or in the FormControl instance works.

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

OSX

  • Angular version: 2.0.X

2.2.3

  • Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
  • Language: [all | TypeScript X.X | ES6/7 | ES5]

  • Node (for AoT issues): node --version =

Metadata

Metadata

Assignees

No one assigned

    Labels

    area: formsneeds reproductionThis issue needs a reproduction in order for the team to investigate further

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions