Nebular: Using reactive forms with nb-radio

[felixwahner]

Issue type

I'm submitting a ...

• [ ] bug report
• [x] feature request

Issue description

Current behavior:
Currently nb-radio doesn't work with reactive forms: Adding a formControlName="foo" attribute throws an error:

ERROR Error: No value accessor for form control with name: 'foo'

Expected behavior:
It would be nice to be able to use nb-radio with reactive forms and get the value through the formControlName

Steps to reproduce:
See related code

Related code:
https://angular-agj9xr.stackblitz.io

Other information:

npm, node, OS, Browser
See stackblitz example

Angular, Nebular

    "@angular/animations": "^7.0.0",
    "@angular/cdk": "^7.0.0",
    "@angular/common": "^7.0.1",
    "@angular/compiler": "^7.0.1",
    "@angular/core": "^7.0.1",
    "@angular/forms": "^7.0.1",
    "@angular/platform-browser": "^7.0.1",
    "@angular/platform-browser-dynamic": "^7.0.1",
    "@angular/router": "^7.0.1",
    "@nebular/theme": "^3.0.0",

[Tibing]

Hi @felixwahner, I've checked your issue myself and didn't find any issues. But the issue exists in your stackblitz, so, could you please provide a stackblitz with sources?

[felixwahner]

Hi @Tibing,
That would be: https://stackblitz.com/edit/angular-agj9xr

[ilDon]

Hi @felixwahner ,
I can confirm that I am having the same issue with the radio element. It seems it does not support formControlName at all.

As an alternative strategy, I did the following with ngModel and ngModelChange:

my-radio.component.html

<nb-radio-group name="fieldName" [(ngModel)]="valueRadio" (ngModelChange)="changedValue()">
  <nb-radio *ngFor="let option of options" [value]="option.value">
    {{ option.txt }}
  </nb-radio>
</nb-radio-group>

my-radio.component.ts

public changedValue(): void {
  const newVal = {
    fieldName: this.valueRadio
  };
  this.formGroup.patchValue(newVal);
}

Note that fieldName is the name of the formGroup control being edited. Also note that it is important to specify the name for the nb-radio-group, otherwise if you have multiple radio components in the same page they will be treated as one.

[herbkora]

@ilDon I think instead of using ngModel with a reactive form it will be better to use custom-control-input that is provided by nebular
<label class="custom-control custom-radio"*ngFor="let option of options"> <input type="radio" class="custom-control-input" name="fieldName" formControlName="fieldName" value={{option}} > <span class="custom-control-indicator"></span> <span class="custom-control-description"> {{option}} </span> </label>

[nnixaa]

Should be fine in Nebular 4.

[TomasTopinka]

Using latest ngx-admin with Nebular 4.1.2 and still not working, can you provide example with Reactive form ?

[danbete]

ok, i figured it out,
this will NOT work with value as:
<nb-radio value='false'>no</nb-radio>
instead do:
<nb-radio [value]='false'>no</nb-radio>

full example:

          <nb-radio-group formControlName='someControllerName' name='someName'>
            <nb-radio [value]='true'>yes</nb-radio>
            <nb-radio [value]='false'>no</nb-radio>
          </nb-radio-group>

BTW i'm on nebular 4.5.0

[recepkucek]

You must import FormsModule if you did not.