ERROR Error: No value accessor for form control with unspecified name attribute

Phoenix124 commented 6 years ago

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

ERROR Error: No value accessor for form control with unspecified name attribute at _throwError (forms.js:2385) at setUpControl (forms.js:2257) at NgModel._setUpStandalone (forms.js:6150) at NgModel._setUpControl (forms.js:6119) at NgModel.ngOnChanges (forms.js:6047) at checkAndUpdateDirectiveInline (core.js:12091) at checkAndUpdateNodeInline (core.js:13597) at checkAndUpdateNode (core.js:13540) at debugCheckAndUpdateNode (core.js:14412) at debugCheckDirectivesFn (core.js:14353) On page <tag-input [(ngModel)]='items' > Component.ts items = ['Spring', 'Item'];

Expected behavior

Autocomplete-tag is showing

Minimal reproduction of the problem with instructions (if applicable)

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

Angular version:

package.json { "name": "front", "version": "0.0.0", "license": "MIT", "scripts": { "dev": "ng serve", "build.prod": "ng build ", "ng": "ng", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e", "postinstall": "ng build " }, "private": true, "dependencies": { "@angular/animations": "^5.0.0", "@angular/common": "^5.0.0", "@angular/compiler": "^5.0.0", "@angular/compiler-cli": "^5.0.0", "@angular/core": "^5.0.0", "@angular/forms": "^5.0.0", "@angular/http": "^5.0.0", "@angular/platform-browser": "^5.0.0", "@angular/platform-browser-dynamic": "^5.0.0", "@angular/platform-server": "^5.0.0", "@angular/router": "^5.0.0", "angular2-ui-switch": "^1.2.0", "bootstrap": "^3.3.7", "cool-ascii-faces": "1.3.4", "core-js": "^2.5.7", "express": "^4.16.3", "file-saver": "^1.3.8", "i": "^0.3.6", "jquery": "^3.2.1", "material-design-icons": "^3.0.1", "ng2-bootstrap": "^1.6.3", "ng2-img-cropper": "^0.9.0", "ngx-chips": "^1.5.4", "ngx-modialog": "^5.0.1", "rxjs": "^5.5.2", "tinymce": "^4.8.2", "zone.js": "^0.8.26" }, "devDependencies": { "@angular/cli": "^1.7.4", "@types/jasmine": "2.5.38", "@types/jquery": "^2.0.49", "@types/node": "^6.0.116", "codelyzer": "~2.0.0", "jasmine-core": "~2.5.2", "jasmine-spec-reporter": "~3.2.0", "karma": "^3.0.0", "karma-chrome-launcher": "~2.0.0", "karma-cli": "~1.0.1", "karma-coverage-istanbul-reporter": "^0.2.0", "karma-jasmine": "^1.1.2", "karma-jasmine-html-reporter": "^0.2.2", "protractor": "^5.4.0", "ts-node": "~2.0.0", "tslint": "~4.5.0", "typescript": "^2.4.2" }, "engines": { "node": "6.11.1", "npm": "3.10.10" } }

ngx-chips version:

"ngx-chips": "^1.5.4"

Chrome

Gbuomprisco commented 6 years ago

Can you try with the latest version?

Phoenix124 commented 6 years ago

update ngx-chips to 1.9.4, the same problem

Gbuomprisco commented 6 years ago

Please add more code - the demo works, so I assume the issue is somewhere in your code

Phoenix124 commented 6 years ago

@Gbuomprisco i don't know what code i should add , because project is huge

Gbuomprisco commented 6 years ago

The component html and ts that contains the chips

Phoenix124 commented 6 years ago

component ` [import {Component, ElementRef, OnInit} from '@angular/core'; import {SkillService} from '../../skill/skill.service'; import {Skill} from '../../skill/skill'; import {element} from 'protractor';

@Component({ selector: 'app-autocomplete-and-add', templateUrl: './autocomplete.component.html', template: <tag-input [(ngModel)]='items'></tag-input>, styleUrls: ['./autocomplete.component.css'], host: { '(document:click)': 'handleClick($event)', }, }) export class AutoCompleteComponent implements OnInit { public query = ''; public skills: Skill[]; public filteredList = []; public elementRef; items = ['Pizza', 'Pasta', 'Parmesan'];

constructor(myElement: ElementRef, private _appService: SkillService) { this.elementRef = myElement; }

ngOnInit () { this._appService.getAll().subscribe( data => { this.skills = data; console.log('Fetched skills from service'); }, error => { console.log('Error: ', error); } ); }](url)

filter() { if (this.query !== '') { this.filteredList = this.skills.filter(function(filterSkill) { return filterSkill.name().toLowerCase().indexOf(this.query.toLowerCase()) > -1; }.bind(this)); } else { this.filteredList = []; } }

select(item) { this.query = item; this.filteredList = []; }

handleClick(event) { let clickedComponent = event.target; let inside = false; do { if (clickedComponent === this.elementRef.nativeElement) { inside = true; } clickedComponent = clickedComponent.parentNode; } while (clickedComponent); if (!inside) { this.filteredList = []; } } } `

html <tag-input [(ngModel)]='items' #[editable]='true'>

Phoenix124 commented 6 years ago

@Gbuomprisco Added

Gbuomprisco commented 6 years ago

Have a look at https://stackoverflow.com/questions/38958347/angular2-rc-5-custom-input-no-value-accessor-for-form-control-with-unspecified

Gbuomprisco / ngx-chips

ERROR Error: No value accessor for form control with unspecified name attribute #800