angular2 – ngModel not working on labels (ng2-bootstrap, paper-kit)

Issue

For me, [(ngModel)]="foo" does not work in labels which are used to restyle default HTML5 form controls, more precisely radio buttons. The goal is to use these to change values like with default input radios. I currently use ng2-bootstrap, but also tried the paper-kit (http://www.creative-tim.com/live/paper-kit).

When using the documented usage of ng2-bootstrap (https://valor-software.com/ng2-bootstrap/#/buttons)

<label class="btn btn-primary" name="test" [(ngModel)]="foo" btnRadio="foo">foo</label>

I get this error:

core.umd.js:3468 Error: Uncaught (in promise): Error: No value accessor for form control with name: 'test'
at resolvePromise (zone.js:429)
at zone.js:465
at ZoneDelegate.invokeTask (zone.js:236)
at Object.onInvokeTask (core.umd.js:6233)
at ZoneDelegate.invokeTask (zone.js:235)
at Zone.runTask (zone.js:136)
at drainMicroTaskQueue (zone.js:368)
at XMLHttpRequest.ZoneTask.invoke (zone.js:308)

This might be fixed using the ngDefaultControl attribute in the label, still [(ngModel)] is ignored and not propagated. The same issue happens on the usage of paper-kit.

It works on normal radio buttons without any issues.

Solution

You need to add ButtonsModule to imports of the module where you want to use them

@NgModule({
  imports: [ButtonsModule],
  declarations: [...],
  ...
})
export class MyModule {}

Answered By – Günter Zöchbauer

Answer Checked By – Marilyn (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.