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.

RC 6 Reactive Forms doesn't support disabled binding

See original GitHub issue

I recently upgraded my project to RC 6. In my app we are using Reactive Forms. Among form fields there is a field which needs to be conditionally disabled.

Prior to RC 6 we were able to achieve this by applying disabled like like this.

<input formControlName="myField" type="text" [disabled]="form.controls.otherField.value">

After upgrade when I browse to that component, I see below warning in 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)
      });

I believe the the option to disable form field should be supported with Reactive Forms as well.

Currently to overcome this warning, we have to capture change event on otherField

(change)="onChange()"

onChange() {
        if (this.form.controls['otherField'].value) {
            this.form.controls['myField'].disabled = true;
        } else {
            this.form.controls['myField'].disabled = false;
        }
    }

Issue Analytics

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

github_iconTop GitHub Comments

7reactions
0cvcommented, Sep 10, 2016

@kara this issue is indeed a dupe, but https://github.com/angular/angular/issues/11271 is closed too. Shall it not be reopened, or are you not (re)considering to support the disabled attribute again?

2reactions
chouicommented, Jul 26, 2017

ngOnChanges(changes){ if(this.isModify){ for(let prop in this.form.controls){ this.form.controls[prop].disable({onlySelf: true }) } }else{ for(let prop in this.form.controls){ this.form.controls[prop].enable({onlySelf: true }) } } } this is work for me

Read more comments on GitHub >

github_iconTop Results From Across the Web

angular - Reactive forms - disabled attribute - Stack Overflow
I have been using [attr.disabled] because I still like this template driven than programmatic enable()/disable() as it is superior IMO.
Read more >
Disabling Form Controls When Working With Reactive Forms ...
It looks like you're using the disabled attribute with a reactive form directive. If you set disabled to true when you set up...
Read more >
Reactive forms - Angular
Reactive forms provide a model-driven approach to handling form inputs whose values change over time. This guide shows you how to create and...
Read more >
AngularJS: Developer Guide: Forms
The key directive in understanding two-way data-binding is ngModel. ... Note that novalidate is used to disable browser's native form validation.
Read more >
Angular Form Builder and Validation Management - Cory Rylan
What you would need is Validators.require("firstNameRequired") but that feature that you pass a custom errorKey to the Validator does not exist, ...
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