angularradio-buttonng2-bootstrapangular-seed

ng2-bootstrap btnRadio in angular 2 rc2 seed project. Two-way binding to ngModel is broken?


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"
}

Solution

  • 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.