CODEWITHSUNDEEP
angularng2-bootstrapangular2-ngmodel
HyEnd
HyEnd

Reputation: 13

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

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.

Upvotes: 1

Views: 333

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657781

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

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

Upvotes: 0

Related Questions