I'm trying to use the ng2-bootstrap radio-buttons in angular 2 rc2 seed project.
The following code works without any problems in our angular 2 rc1 project. Now I'm trying to create a seed project using https://github.com/mgechev/angular2-seed
as the base and can't do it properly.
I use ng2-bootstrap radio-buttons directive in following way:
<div class="btn btn-primary" [(ngModel)]="mode" btnRadio="EDITOR" uncheckable>
Editor
</div>
I include the ng2-bootstrap and moment libraries in seed.config.ts. I have tried many variants (also with ng2-bootstrap/ng2-bootstrap
etc.)
paths: {
...
'ng2-bootstrap': `${this.NPM_BASE}/ng2-bootstrap/`,
'moment': `${this.NPM_BASE}moment/`
},
packages: {
...
'ng2-bootstrap': { main: "ng2-bootstrap.js", defaultExtension: 'js' },
'moment': { main: "moment.js", defaultExtension: 'js' },
}
I import the following directives
import { BUTTON_DIRECTIVES } from 'ng2-bootstrap/ng2-bootstrap';
import { ButtonRadioDirective } from 'ng2-bootstrap/ng2-bootstrap';
And use this by my component
@Component({
moduleId: module.id,
selector: "editor",
templateUrl: "editor.html",
directives: [FORM_DIRECTIVES, CORE_DIRECTIVES, BUTTON_DIRECTIVES,
CodeMirrorComponent, ButtonRadioDirective]
})
I build the project without any problems, but when i run the server, i obtain the following run time exception:
ORIGINAL EXCEPTION: No value accessor for ''
I'm sure the two-way binding to ngModel is broken here. I have used this code with rc1 bundles and without seed project. Now I'm not sure, what can be a problem - new angular version, or using a build system (in my case - gulp).
I hope anybody can help with advice. Many thanks in advance.
Edited since 21.06.2016
The versions of used packages are following:
"dependencies": {
"@angular/common": "2.0.0-rc.2",
"@angular/compiler": "2.0.0-rc.2",
"@angular/core": "2.0.0-rc.2",
"@angular/forms": "^0.1.0",
"@angular/platform-browser": "2.0.0-rc.2",
"@angular/platform-browser-dynamic": "2.0.0-rc.2",
"@angular/router": "3.0.0-alpha.6",
"es6-module-loader": "^0.17.8",
"core-js": "^2.4.0",
"rxjs": "5.0.0-beta.6",
"systemjs": "0.19.26",
"zone.js": "^0.6.12",
"bootstrap": "^3.3.6",
"ng2-bootstrap": "^1.0.17"
}
Thank you all, i have found the problem and (temporally) solution. The problem was conflict between ng2-bootstrap and angular.forms (my version was 0.1.0). The problem is related to this issue https://github.com/valor-software/ng2-bootstrap/issues/627 .
I don't use the angular forms now and have simple commented following lines in main.ts
//import { disableDeprecatedForms, provideForms } from '@angular/forms/index';
bootstrap(AppComponent, [
//disableDeprecatedForms(),
//provideForms(),
APP_ROUTER_PROVIDERS,
{
provide: APP_BASE_HREF,
useValue: '<%= APP_BASE %>'
}
]);
My code works now as expected.