Error: No value accessor for '' - AutoComplete

UI Components for Angular
Post Reply
uNki
Posts: 13
Joined: 28 Apr 2014, 19:15

11 May 2016, 16:30

hi there!

i'm trying to get the AutoComplete Directive to work but get the error written in the title.

package.json
{
"name": "...",
"version": "0.0.1",
"private": true,
"dependencies": {
"@angular/common": "2.0.0-rc.1",
"@angular/compiler": "2.0.0-rc.1",
"@angular/core": "2.0.0-rc.1",
"@angular/http": "^2.0.0-rc.1",
"@angular/platform-browser": "2.0.0-rc.1",
"@angular/platform-browser-dynamic": "2.0.0-rc.1",
"@angular/router": "^2.0.0-rc.1",
"@angular/router-deprecated": "^2.0.0-rc.1",
"angular2-jwt": "0.1.8",
"async": "1.5.0",
"better-console": "0.2.4",
"body-parser": "1.14.2",
"cors": "2.7.1",
"del": "2.2.0",
"edge": "5.0.0",
"es6-promise": "3.0.2",
"es6-shim": "0.35.0",
"express": "4.13.3",
"extend": "3.0.0",
"jquery": "2.2.0",
"jsonwebtoken": "5.0.5",
"lodash": "3.10.1",
"map-stream": "0.0.6",
"memcached": "2.2.1",
"mssql": "3.1.0",
"node-uuid": "^1.4.7",
"nodemailer": "2.2.1",
"password-hash-and-salt": "0.1.3",
"primeng": "^1.0.0-beta.5",
"primeui": "^4.1.10",
"reflect-metadata": "0.1.3",
"request": "2.65.0",
"require-dot-file": "0.4.0",
"run-sequence": "1.1.5",
"rxjs": "5.0.0-beta.6",
"semantic-ui": "2.1.8",
"simple-line-icons": "2.2.3",
"systemjs": "0.19.27",
"yamljs": "0.2.4",
"zone.js": "0.6.12"
},
"devDependencies": {
"babel-core": "^6.7.7",
"babel-preset-es2015": "^6.6.0",
"babel-runtime": "^6.6.1",
"del": "^2.2.0",
"gulp": "^3.9.1",
"gulp-angular-embed-templates": "^2.2.0",
"gulp-angular2-embed-sass": "^0.1.0",
"gulp-autoprefixer": "3.1.0",
"gulp-babel": "^6.1.2",
"gulp-clean": "^0.3.2",
"gulp-concat": "^2.6.0",
"gulp-rename": "^1.2.2",
"gulp-replace": "^0.5.4",
"gulp-sass": "2.0.4",
"gulp-typescript": "^2.13.0",
"gulp-uglify": "^1.5.3",
"pump": "^1.0.1",
"run-sequence": "^1.1.5",
"typescript": "^1.8.10"
},
"scripts": {
"tsc": "tsc",
"tsc:w": "tsc -w",
"start": "npm run tsc:w"
},
"main": "server.js",
"author": "...",
"license": "ISC",
"keywords": [],
"description": ""
}
systemjs config:

Code: Select all

System.config({
            map: {
                '@angular': 'node_modules/@angular',
                'rxjs': 'node_modules/rxjs',
                'angular2-jwt': 'node_modules/angular2-jwt',
                'primeng': 'node_modules/primeng'
            },
            packages: {
                'app': { defaultExtension: 'js', main: 'bootstrap.js' },
                'rxjs': { defaultExtension: 'js' },
                'primeng': { defaultExtension: 'js' },                
                'angular2-jwt': { defaultExtension: 'js' },
                '@angular/common': { defaultExtension: 'js', main: 'index.js' },
                '@angular/compiler': { defaultExtension: 'js', main: 'index.js' },
                '@angular/core': { defaultExtension: 'js', main: 'index.js' },
                '@angular/http': { defaultExtension: 'js', main: 'index.js' },
                '@angular/platform-browser': { defaultExtension: 'js', main: 'index.js' },
                '@angular/platform-browser-dynamic': { defaultExtension: 'js', main: 'index.js' },
                '@angular/router': { defaultExtension: 'js', main: 'index.js' },
                '@angular/router-deprecated': { defaultExtension: 'js', main: 'index.js' }
            }
        });
settings-user.ts

Code: Select all

import { Component } from '@angular/core';
import { APIService } from '../../../common/api-service';
import { AutoComplete } from 'primeng/primeng';

declare var jQuery: any;

export interface Adresse {
    AdresseLFN: number,
    Branche: string,
    Email: string,
    Name: string
}

@Component({
    selector: 'settings-user',
    templateUrl: './settings-user.html',
    styleUrls: ['./settings-user.scss'],
    directives: [AutoComplete]
})
export class SettingsUserComponent {
    
    public adressen: Adresse[];
    public adresse: Adresse ;
    
    search(query) {
        console.log('Suche:', query);
        this.apiService.getAdressenByName(query)
            .subscribe(res => {
                if (res) {
                    console.log('Ergebnisse:', res);
                    this.adressen = res;
                }
            },
            err => {
                console.log(err);
            });
    }
    
    //....

    constructor(public apiService: APIService) {
    }
}
settings-user.html

Code: Select all

<div class="field">
   <label>Adressdatensatz</label>
   <p-autoComplete [(ngModel)]="adresse" [suggestions]="adressen" (completeMethod)="search($event)" field="Name"></p-autoComplete>
</div>

any ideas? The Calendar directive works like a charm (with NgModel!)

Thank you!!

cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

11 May 2016, 16:48

All looks good but I can't replicate this issue when I run showcase locally and also at live demo. Can you please try with another component as well, e.g. spinner?

uNki
Posts: 13
Joined: 28 Apr 2014, 19:15

11 May 2016, 17:05

thanks for the fast reply!

Spinner works, Dropdown doesn't. Tried the example from the showcase.

Do I need to import anything else? I don't use NgControl or NgForm, so no FORM_DIRECTIVES or FORM_PROVIDERS imported.. :(

cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

11 May 2016, 17:11

Very weird, I've just tried dropdown and it also worked.

I think it could be related to;

https://github.com/angular/angular/issues/7435

https://github.com/angular/angular/issu ... -203247147

Do you do any gulp processing to angular2 files?

uNki
Posts: 13
Joined: 28 Apr 2014, 19:15

11 May 2016, 18:08

okay, Dropdown works, just forgot to include the directive.

AutoComplete still does not.

I'm running several gulp tasks to embed the templates e.g. - but they are correct and I just tried it manually with templateUrl instead - no luck.

Do suggestions and ngModel properties have to be in a specific format, e.g. have a value property or something like that? can they be null/undefined at the beginning or do they have to be an empty object?

Code: Select all

<p-autoComplete [(ngModel)]="adresse" [suggestions]="adressen" (completeMethod)="search($event)" field="Name"></p-autoComplete>
adresse is of type Adresse (see code above) and is now undefined at the beginning. adressen is of type Adresse[] and undefined, too. 'Name' is a property of Adresse.


EDIT:

this is the final JavaScript file after the gulp tasks:

Code: Select all

System.register(['@angular/core', '../../../common/api-service', 'primeng/primeng'], function(exports_1, context_1) {
    "use strict";
    var __moduleName = context_1 && context_1.id;
    var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
        if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
        else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
        return c > 3 && r && Object.defineProperty(target, key, r), r;
    };
    var __metadata = (this && this.__metadata) || function (k, v) {
        if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
    };
    var core_1, api_service_1, primeng_1;
    var SettingsUserComponent;
    return {
        setters:[
            function (core_1_1) {
                core_1 = core_1_1;
            },
            function (api_service_1_1) {
                api_service_1 = api_service_1_1;
            },
            function (primeng_1_1) {
                primeng_1 = primeng_1_1;
            }],
        execute: function() {
            SettingsUserComponent = (function () {
                function SettingsUserComponent(apiService) {
                    this.apiService = apiService;
                }
                SettingsUserComponent.prototype.search = function (query) {
                    var _this = this;
                    console.log('Suche:', query);
                    this.apiService.getAdressenByName(query)
                        .subscribe(function (res) {
                        if (res) {
                            console.log('Ergebnisse:', res);
                            _this.adressen = res;
                        }
                    }, function (err) {
                        console.log(err);
                    });
                };
                SettingsUserComponent = __decorate([
                    core_1.Component({
                        selector: 'settings-user',
                        template: '<p-autocomplete [(ngModel)]="adresse" [suggestions]="adressen" (completeMethod)="search($event)" field="Name"></p-autocomplete>',
                        styles: [''],
                        directives: [primeng_1.AutoComplete]
                    }), 
                    __metadata('design:paramtypes', [api_service_1.APIService])
                ], SettingsUserComponent);
                return SettingsUserComponent;
            }());
            exports_1("SettingsUserComponent", SettingsUserComponent);
        }
    }
});
Chrome DevTools say that the error occurs in:

Code: Select all

Error: No value accessor for ''
    at new BaseException (exceptions.ts:14)
    at _throwError (shared.ts:61)
    at Object.setUpControl (shared.ts:33)
    at NgModel.ngOnChanges (ng_model.ts:51)
    at DebugAppView._View_SettingsUserComponent0.detectChangesInternal (SettingsUserComponent.template.js:61)
which is here (at line "if ((changes !== null)) { self._NgModel_0_3.ngOnChanges(changes); }"):

Code: Select all

(function(jit_StaticNodeDebugInfo0,jit_NgModel1,jit_NgControl2,jit_NgControlStatus3,jit_DebugAppView4,jit_ViewType_COMPONENT5,jit_ChangeDetectionStrategy_CheckAlways6,jit_uninitialized7,jit_checkBinding8,jit_SimpleChange9,jit_ViewEncapsulation_Emulated10,jit_val11
/**/) {
  var nodeDebugInfos_SettingsUserComponent0 = [new jit_StaticNodeDebugInfo0([
    jit_NgModel1,
    jit_NgControl2,
    jit_NgControlStatus3
  ]
,null,{})];
var renderType_SettingsUserComponent = null;
function _View_SettingsUserComponent0(viewUtils,parentInjector,declarationEl) {
  var self = this;
  jit_DebugAppView4.call(this, _View_SettingsUserComponent0,renderType_SettingsUserComponent,jit_ViewType_COMPONENT5,viewUtils,parentInjector,declarationEl,jit_ChangeDetectionStrategy_CheckAlways6,nodeDebugInfos_SettingsUserComponent0);
}
_View_SettingsUserComponent0.prototype = Object.create(jit_DebugAppView4.prototype);
_View_SettingsUserComponent0.prototype.createInternal = function(rootSelector) {
  var self = this;
  var parentRenderNode = self.renderer.createViewRoot(self.declarationAppElement.nativeElement);
  self._el_0 = self.renderer.createElement(parentRenderNode,'p-autocomplete',self.debug(0,0,0));
  self.renderer.setElementAttribute(self._el_0,'field','Name');
  self._NgModel_0_3 = new jit_NgModel1(null,null,null);
  self._NgControl_0_4 = self._NgModel_0_3;
  self._NgControlStatus_0_5 = new jit_NgControlStatus3(self._NgControl_0_4);
  self._expr_2 = jit_uninitialized7;
  var disposable_0 = self.renderer.listen(self._el_0,'ngModelChange',self.eventHandler(self._handle_ngModelChange_0_0.bind(self)));
  var disposable_1 = self.renderer.listen(self._el_0,'completeMethod',self.eventHandler(self._handle_completeMethod_0_1.bind(self)));
  self._expr_3 = jit_uninitialized7;
  var subscription_0 = self._NgModel_0_3.update.subscribe(self.eventHandler(self._handle_ngModelChange_0_0.bind(self)));
  self._expr_4 = jit_uninitialized7;
  self._expr_5 = jit_uninitialized7;
  self._expr_6 = jit_uninitialized7;
  self._expr_7 = jit_uninitialized7;
  self._expr_8 = jit_uninitialized7;
  self._expr_9 = jit_uninitialized7;
  self.init([],[self._el_0],[
    disposable_0,
    disposable_1
  ]
  ,[subscription_0]);
  return null;
};
_View_SettingsUserComponent0.prototype.injectorGetInternal = function(token,requestNodeIndex,notFoundResult) {
  var self = this;
  if (((token === jit_NgModel1) && (0 === requestNodeIndex))) { return self._NgModel_0_3; }
  if (((token === jit_NgControl2) && (0 === requestNodeIndex))) { return self._NgControl_0_4; }
  if (((token === jit_NgControlStatus3) && (0 === requestNodeIndex))) { return self._NgControlStatus_0_5; }
  return notFoundResult;
};
_View_SettingsUserComponent0.prototype.detectChangesInternal = function(throwOnChange) {
  var self = this;
  var changes = null;
  self.debug(0,0,0);
  changes = null;
  self.debug(0,0,16);
  var currVal_3 = self.context.adresse;
  if (jit_checkBinding8(throwOnChange,self._expr_3,currVal_3)) {
    self._NgModel_0_3.model = currVal_3;
    if ((changes === null)) { (changes = {}); }
    changes['model'] = new jit_SimpleChange9(self._expr_3,currVal_3);
    self._expr_3 = currVal_3;
  }
  if ((changes !== null)) { self._NgModel_0_3.ngOnChanges(changes); }
  self.detectContentChildrenChanges(throwOnChange);
  self.debug(0,0,38);
  var currVal_2 = self.context.adressen;
  if (jit_checkBinding8(throwOnChange,self._expr_2,currVal_2)) {
    self.renderer.setElementProperty(self._el_0,'suggestions',currVal_2);
    self._expr_2 = currVal_2;
  }
  self.debug(0,0,0);
  var currVal_4 = self._NgControlStatus_0_5.ngClassUntouched;
  if (jit_checkBinding8(throwOnChange,self._expr_4,currVal_4)) {
    self.renderer.setElementClass(self._el_0,'ng-untouched',currVal_4);
    self._expr_4 = currVal_4;
  }
  self.debug(0,0,0);
  var currVal_5 = self._NgControlStatus_0_5.ngClassTouched;
  if (jit_checkBinding8(throwOnChange,self._expr_5,currVal_5)) {
    self.renderer.setElementClass(self._el_0,'ng-touched',currVal_5);
    self._expr_5 = currVal_5;
  }
  self.debug(0,0,0);
  var currVal_6 = self._NgControlStatus_0_5.ngClassPristine;
  if (jit_checkBinding8(throwOnChange,self._expr_6,currVal_6)) {
    self.renderer.setElementClass(self._el_0,'ng-pristine',currVal_6);
    self._expr_6 = currVal_6;
  }
  self.debug(0,0,0);
  var currVal_7 = self._NgControlStatus_0_5.ngClassDirty;
  if (jit_checkBinding8(throwOnChange,self._expr_7,currVal_7)) {
    self.renderer.setElementClass(self._el_0,'ng-dirty',currVal_7);
    self._expr_7 = currVal_7;
  }
  self.debug(0,0,0);
  var currVal_8 = self._NgControlStatus_0_5.ngClassValid;
  if (jit_checkBinding8(throwOnChange,self._expr_8,currVal_8)) {
    self.renderer.setElementClass(self._el_0,'ng-valid',currVal_8);
    self._expr_8 = currVal_8;
  }
  self.debug(0,0,0);
  var currVal_9 = self._NgControlStatus_0_5.ngClassInvalid;
  if (jit_checkBinding8(throwOnChange,self._expr_9,currVal_9)) {
    self.renderer.setElementClass(self._el_0,'ng-invalid',currVal_9);
    self._expr_9 = currVal_9;
  }
  self.detectViewChildrenChanges(throwOnChange);
};
_View_SettingsUserComponent0.prototype._handle_ngModelChange_0_0 = function($event) {
  var self = this;
  self.markPathToRootAsCheckOnce();
  self.debug(0,0,16);
  var pd_0 = ((self.context.adresse = $event) !== false);
  return (true && pd_0);
};
_View_SettingsUserComponent0.prototype._handle_completeMethod_0_1 = function($event) {
  var self = this;
  self.markPathToRootAsCheckOnce();
  self.debug(0,0,63);
  var pd_0 = (self.context.search($event) !== false);
  return (true && pd_0);
};
function viewFactory_SettingsUserComponent0(viewUtils,parentInjector,declarationEl) {
  if ((renderType_SettingsUserComponent === null)) { (renderType_SettingsUserComponent = viewUtils.createRenderComponentType('./SettingsUserComponent class SettingsUserComponent - inline template',0,jit_ViewEncapsulation_Emulated10,jit_val11)); }
  return new _View_SettingsUserComponent0(viewUtils,parentInjector,declarationEl);
}
return viewFactory_SettingsUserComponent0
})
any ideas? :cry:

uNki
Posts: 13
Joined: 28 Apr 2014, 19:15

12 May 2016, 10:17

solved.

gulp-angular-embed-templates changed <p-autoComplete> to <p-autocomplete>

damn buggy gulp plugin :/

cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

12 May 2016, 10:47

Thanks for sharing, I'm pretty it will be useful for future reference.

manang85
Posts: 30
Joined: 12 May 2016, 19:53

12 May 2016, 19:56

Hi,
i have the same problem with the following components:
p-radioButton
p-selectButton

do you have any idea?
thank you
Angelo

EDIT:
sorry, it was my error, I didn't put the name of component inside "directive"

cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

14 May 2016, 21:55

Good to hear it works now, I think your problem is different.

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 12 guests