ngModel and btnRadio

[pho3nixf1re]

When using btnRadio with ngModel on current angular 2.0 beta-0 I get the following error.

Error: No value accessor for '' in [option.value in FePlanListFilter@6:12]

The relevant code copies the example on the demo site.

import {Component, View, Input} from 'angular2/core';

import template from './filter-buttons.html';
import './filter-buttons.less';

@Component({
    selector: 'filter-buttons'
})
@View({
    template
})
export default class FilterButtons {
    @Input() title;
    @Input() options;

    constructor() {
        this.currentFilter = '';
    }

    filterChanged(value) {
        this.currentFilter = value;
        // example usage, other things will happen here...
    }
}

<div class="filter-buttons">
    <h6 class="filter-buttons__title">Filter by {{ title }}</h6>
    <div class="btn-group">
        <label
            *ngFor="#option of options"
            class="btn btn-default"
            [ngModel]="option.value"
            (ngModel)="filterChanged(option.value)"
            btnRadio
            uncheckable>{{ option.display }}</label>
    </div>
</div>

If I add ngDefaultAccessor to thethen the error goes away but the buttons do not toggle or fire thengModel` event. WTF is happening here?

[valorkin]

at the moment custom controls are tricky, so:
https://github.com/valor-software/ng2-bootstrap/blob/master/components/buttons/button-radio.ts#L36-L49
so this one will not work:

[ngModel]="option.value"
(ngModel)="filterChanged(option.value)"

but this one, should:
[(ngModel)]=option.value

here is one of the options how to handle changed value
http://blog.thoughtram.io/angular/2016/01/06/taking-advantage-of-observables-in-angular2.html

[valorkin]

@pho3nixf1re did it helped you?

[pho3nixf1re]

I ended up rolling my own component to handle this and avoid 2-way binding completely.

[eugene1985]

I have the same problem using angular 2.0.0.rc2.

platform-browser.umd.js:2306 ORIGINAL EXCEPTION: No value accessor for ''BrowserDomAdapter.logError @ platform-browser.umd.js:2306

I use following template

<div class="btn btn-primary" [(ngModel)]="mode" btnRadio="EDITOR" uncheckable>
     <i class="fa fa-pencil fa-lg"></i>
     <span class="hidden-xs">Editor</span>
</div>

I import and use following directives

import { BUTTON_DIRECTIVES, BUTTON_DIRECTIVES } from 'ng2-bootstrap/ng2-bootstrap';

The same code works good with rc1. Here are the packages, that i use:

"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/http": "2.0.0-rc.2",
"@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",
"moment": "2.13.0"

}

[Dinistro]

@eugene1985 This is because @angular/forms is not supported at the moment. But It will be as soon as this PR is merged: #631

[martinsvb]

Hello,
please, is this issue solved?

I have this "dependencies": {
"@angular/common": "2.0.0-rc.4",
"@angular/compiler": "2.0.0-rc.4",
"@angular/core": "2.0.0-rc.4",
"@angular/forms": "0.2.0",
"@angular/http": "2.0.0-rc.4",
"@angular/platform-browser": "2.0.0-rc.4",
"@angular/platform-browser-dynamic": "2.0.0-rc.4",
"@angular/router": "3.0.0-beta.2",
"bootstrap": "4.0.0-alpha.2",
"core-js": "^2.4.0",
"es6-module-loader": "^0.17.8",
"jquery": "2.2.4",
"moment": "^2.13.0",
"ng2-bootstrap": "^1.0.22",
"rxjs": "5.0.0-beta.6",
"systemjs": "0.19.26",
"tether": "1.3.2",
"zone.js": "^0.6.12"
}

and using example from official sites and problem occurs

Thanks
Martin

[valorkin]

@martinsvb show your app bootstrap and ngModel import

[martinsvb]

It's strange.
It doesn't work in dev build and in prod it's ok.
I use mgechev's seed.
Maybe, I did some mistake in dev build changing.