Ngx-chips: "disabled attribute with a reactive form directive" Warning, when using reactive forms with disabled attribute

[Zoltamcsak]

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]

[Gbuomprisco]

Hi this is a generic angular error. You nerd to remove the disabled attribute from the html. Check out on stack overflow rather than github :)

[swapnali42]

When I implementing drop down list with filter using angular 4.
it display drop down

with filter only when i clicked on drop down menu. but i want drop down list immediately after i trying filter without clicking on it

[Gbuomprisco]

Hi, it's doesn't look like you're using this package?

[swapnali42]

hello i got solution for above issue

[swapnali42]

i am trying following
let myHeaders = new Headers();
myHeaders.set('Content-Type', 'application/json');
// myHeaders.set('Accept', 'text/plain');
let myParams = new HttpParams().set('loanAppID', loanAppId);
myParams = myParams.set('consumerID', consumerId);
myParams = myParams.set('docFormat',docFormat);
let options = new RequestOptions({ headers: myHeaders, params: myParams });
//console.log(JSON.stringify(options));
return this.http.post(${this.resourceUrl}/upload/poa,options)
.map((res: Response) => {
const docURL = res.json();
console.log(docURL);
return docURL;
});
but i got below error
"{
"type" : "http://www.jhipster.tech/problem/problem-with-message",
"title" : "Bad Request",
"status" : 400,
"detail" : "Required Long parameter 'consumerID' is not present",
"path" : "/api/upload/poa",
"message" : "error.http.400"
}"

[Gbuomprisco]

Hi @swapnali42, this package is not related to what you are trying to do. You should probably ask for help on stack overflow instead

[danielgg93]

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