#2743·nebular

NbButtonGroup Reactive Forms

Author: KyleInfanteCreated May 17, 2021Updated Oct 21, 2025

Issue type

I'm submitting a ... (check one with "x")

  • bug report
  • [] feature request

Issue description

Current behavior: Currently not able to get values from an nb-button-group while used with Reactive Forms. Clicking on any of the buttons in the button group does not update the value in the form. Actually, nb-button-group does not even support the formControlName attribute.

Expected behavior: Similar to how the nb-radio-group works, there should be similar functionality like the nb-button-group. I should be able to use the nb-button-group in a Reactive Form and be able to detect changes when a button is pressed.

Steps to reproduce: I have supplied a Stackblitz showing the issue displayed in the Console and the difference of functionality between button groups and radio groups.

Related code: https://stackblitz.com/edit/nebular-reactive-button-group-issue?devtoolsheight=33&file=src/app/app.component.html

Other information:

npm, node, OS, Browser node version: 13.11.00 npm version: 6.14.11 Windows 10 Chrome

Angular, Nebular "@nebular/bootstrap": "^7.0.0", "@nebular/eva-icons": "^7.0.0", "@nebular/theme": "^7.0.0", "@angular/animations": "~11.2.9", "@angular/cdk": "^11.2.8", "@angular/cli": "^11.2.8", "@angular/common": "~11.2.9", "@angular/compiler": "~11.2.9", "@angular/core": "~11.2.9", "@angular/forms": "~11.2.9", "@angular/platform-browser": "~11.2.9", "@angular/platform-browser-dynamic": "~11.2.9", "@angular/router": "~11.2.9",