"disabled attribute with a reactive form directive" Warning, when using reactive forms with disabled attribute

PLEASE MAKE SURE THAT:

• you searched similar issues online (9/10 issues in this repo are solved by googling, so please…do it)
• you provide an online demo I can see without having to replicate your environment
• you help me by debugging your issue, and if you can’t, do go on filling out this form

I’m submitting a … (check one with “x”)

[x] bug report => search github for a similar issue or PR before submitting
[ ] support request/question

Notice: feature requests will be ignored, submit a PR if you'd like

Current behavior

Using tag-input with reactive form and adding disabled, angular throws the following warning:

<div [formGroup]='group'>
       <tag-input class='form-control'
                  [formControlName]='controlName'
                  [dragZone]='readOnly ? false : widgetProperty.key'
                  [placeholder]='""'
		  [secondaryPlaceholder]='""'
                  [editable]='!readOnly'
                  [disabled]='readOnly'
		  [theme]='"minimal"' ngDefaultControl
                  (onTagEdited)='group.markAsDirty()'>
         <tag-input-dropdown [autocompleteItems]="autocompleteItems">
         </tag-input-dropdown>
       </tag-input>
    </div>

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)
  });

Expected behavior

It should not throw any warning.

Minimal reproduction of the problem with instructions (if applicable)

What do you use to build your app?. Please specify the version

angular-cli: 1.3.0

Angular version:

4.3.5

ngx-chips version:

1.4.6

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 ]

all

[Gbuomprisco]

The fix should be shipped with v1.5.6. @Zoltamcsak you will need to change the attribute [disabled] to [disable]

[danielgg93]

thanks @Gbuomprisco I had that problem with the disabled but only changed the attribute to disable and everything worked again correctly =)disable="true"