Angular 2: Disable input change not working

Question

Up until \"final\" 2.0 of Angular I have done this:

To dynami

Answer 1

You must be using:

[attr.disabled]

Instead of:

[disabled]

I hope it works.

Answer 2

This should work

toggleName() : void { 
  let ctrl = this.form.get('name')
  ctrl.enabled ? ctrl.disable() : ctrl.enable()
}

Answer 3

If somebody scrolls through this and the accepted answer (Günters) doesn't work, as it didn't for me at first. It might be that you are trying to use it with a custom component and haven't implemented the optional method setDisabledState(isDisabled: boolean) from the ControlValueAccessor interface.

Answer 4

As of RC6 you need to call the disable() function RC6 Forms: disabled attribute cannot be set dynamically anymore.

Answer 5

You can try to use readonly attribute in your input.

disabled >>> readonly

<input type="text" formControlName="name" [readonly]="!showName">

Answer 6

This same issue had me pulling my hair. My solution was to use interpolation rather than one-way binding to update the property. In your case, instead of using:

<input type="text" formControlName="name" [disabled]="!showName">

you could do:

<input type="text" formControlName="name" disabled="{{!showName}}">

As soon as I did that, I was able to dynamically disable / enable elements in my forms.

I hope this helps!