Angular form control disabled binding not working

Question

I have a form control that I disable when the page loads. When the user clicks a button the forms should become enabled for editing. However when I toggle the property that disabled the control nothing happens.

Template

<form [formGroup]='accountForm'>
  <md-input-container>
    <input mdInput formControlName='name' />
  </md-input-container>
  <button (click)='isEditing = !isEditing'>Edit</button>
</form>

Component

export class AccountComponent {
  private accountForm: FormGroup;
  private isEditing = false;
  private name: FormControl = new FormControl({ value: '', disabled: !isEditing; 

  constructor(
    formBuilder: FormBuilder
  ) {
    this.accountForm = formBuilder.group({
      'name': this.name
    });
  });
}

Interesting github [thread](https://github.com/angular/angular/issues/11271#issuecomment-289806196) here — Pankaj Parkar, Jul 31 '17 at 20:22
Possible duplicate of [Angular 2: Disable input change not working](https://stackoverflow.com/questions/39504565/angular-2-disable-input-change-not-working) — AT82, Aug 01 '17 at 11:37

DeborahK · Answer 1 · 2017-07-31T20:36:50.903

12

According to the docs here: https://angular.io/api/forms/FormControl

You can also initialize the control with a form state object on instantiation, which includes both the value and whether or not the control is disabled.

So setting this:

private name: FormControl = new FormControl({ value: '', disabled: !isEditing;

Is only setting how the control is initialized. It is not binding it nor changing it as the value of isEditing changes.

See this issue for more information: https://github.com/angular/angular/issues/11271

(Which I just realized is the same link that Pankaj Parkar provided in their comments.)

edited Jul 31 '17 at 20:36

answered Jul 31 '17 at 20:25

DeborahK

57,520
12
104
129

1

Thanks. I tried binding to disabled in the template initially but it results in a console warning, the inputs aren't disabled as expected and updating the value does not change the disabled state. Warning message: "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." – efarley Jul 31 '17 at 20:30
This is not the way it works. Using reactiv form, you can not set the disable property from template – Grégory Elhaimer Jul 31 '17 at 20:33
On my side, `disabled` in `FormControl` constructure is not working – Wang Liang Mar 25 '20 at 04:52

score 10 · Accepted Answer · answered Jul 31 '17 at 20:40

You can use enable/disable methods to change disable state

template.html

<button (click)="toggleDisable()">Edit</button>

component.ts

toggleDisable() {
  this.accountForm.get('name')[!this.isEditing ? 'enable' : 'disable']();
  this.isEditing = !this.isEditing;
}

Plunker Example

Grégory Elhaimer · Answer 3 · 2017-07-31T20:42:03.590

The problem is in your template.

You have a typo on formControlName. You have formControlName="Name" instead of formControlName="name". Notice the caps.

Moreover, isEditing is not bound to your form control object.

If you want to change the state according to isEditing value, then you should do something like following:

<form [formGroup]='accountForm'>
  <md-input-container>
    <input mdInput formControlName='name' />
  </md-input-container>
  <button (click)='toggleEditMode()'>Edit</button>
</form>

Note the call to a method instead.

export class AccountComponent {
  private accountForm: FormGroup;
  private isEditing = false;
  private name: FormControl = new FormControl({ value: '', disabled:true; 

  constructor(formBuilder: FormBuilder) {
    this.accountForm = formBuilder.group({
      'name': this.name
    });
   }

   toggleEditMode() {
      this.isEditing = !this.isEditing;
      if(this.isEditing){
         this.name.enable();
      }else{
         this.name.disable();
   }
}

Oh you're correct but that was just a mistake typing the code above. My actual code doesn't have that typo. I just typed an example of what I'm trying to do. — efarley, Jul 31 '17 at 20:36

Angular form control disabled binding not working

3 Answers3