Angular forms disabled binding warning

Question

When upgrading to Angular 4, I am getting the following warning in the 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.ֿ

When doing something like this:

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

it's seems that Angular does not like anymore when we use the disabled property on form control.

What is changed and why it's happening?

There are no issues. I don't understand this warning from Angular that appears in the console. — undefined
you should be declaring corresponding form-groups and controls in the component code. if not it will show that warning — Aravind
This is not the problem. Please read the whole question before writing any comment. thanks. — undefined

Aravind Aravind · Accepted Answer · 2017-07-02T09:13:06

It means that you are setting the disabled property through property binding, but you are using formControl which gives reactive nature.

So, you should be declaring the {disable: true} in the code as below,

form = new FormGroup({
    name: new FormControl({value: '', disabled: true})
  });

Note: If you are using reactive forms you should be having a formGroup attribute defined in your HTML.

LIVE DEMO

Angular forms disabled binding warning

1 Answers