Radio Button not support formControlName in reactive form

[ivanKoretskyy]

trafficstars

Bug, feature request, or proposal:

proposal

What is the expected behavior?

mat-radio-button should support formControlName

What is the current behavior?

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

What are the steps to reproduce?

https://stackblitz.com/edit/angular-slemqj-ojrv1g

What is the use-case or motivation for changing an existing behavior?

mat-radio-button should support formControlName withiout parrent mat-radio-group, like native html input with type radio. There is a lot use cases when you cant use mat-radio-group due to DOM restrictions

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular: 5.0.0 Material: 5.0.3 OS: Windows TypeScript: 2.7.0

Is there anything else we should know?

[ivanKoretskyy]

unfortunately, in my case , i can not use mat-radio-group

[shanelovesmarvel]

I encountered a same issue after I upgraded to Angular 5 together with angular cli and material.

It reports an error: Error: No value accessor for form control with unspecified name attribute

Here is my template:

Versions: "@angular/core": "5.2.1", "@angular/forms": "5.2.1", "@angular/material": "5.1.0", "@angular/cli": "1.6.4", "typescript": "2.5.3"

Any ideas ?

[julianobrasil]

@zhao125787935, it seems that your case is a different one, more related to timming issues (lifecycle) or to Angular itself (not to material). Try to put together a stackblitz working example reproducing the error (it doesn't look like it would be difficult) and oppen another issue with it.

[devonsams]

For anyone coming here trying to figure out how to make a group of radio buttons stay in sync across a table row, here's what I'm doing to make it work:

  <form [formGroup]="form">
    <div formArrayName="users">
      <table>
        <thead>
          <tr>
            <th class="left">Name</th>
            <th class="center">None</th>
            <th class="center">View</th>
            <th class="center">Edit</th>
            <th class="center">Admin</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let userRecord of users.controls; let i = index" [formGroupName]="i">
            <td class="left">{{ userRecord.controls.userName.value }}</td>
            <td class="center">
              <mat-radio-group formControlName="permission">
                <mat-radio-button
                  [value]="listPermission.NONE" 
                  [checked]="userRecord.controls.permission.value === listPermission.NONE">
                </mat-radio-button>
              </mat-radio-group>
            </td>
            <td class="center">
              <mat-radio-group formControlName="permission">
                <mat-radio-button
                  [value]="listPermission.VIEW"
                  [checked]="userRecord.controls.permission.value === listPermission.VIEW">
                </mat-radio-button>
              </mat-radio-group>
            </td>
            <td class="center">
              <mat-radio-group formControlName="permission">
                <mat-radio-button
                  [value]="listPermission.EDIT"
                  [checked]="userRecord.controls.permission.value === listPermission.EDIT">
                </mat-radio-button>
              </mat-radio-group>
            </td>
            <td class="center">
              <mat-radio-group formControlName="permission">
                <mat-radio-button
                  [value]="listPermission.ADMIN"
                  [checked]="userRecord.controls.permission.value === listPermission.ADMIN">
                </mat-radio-button>
              </mat-radio-group>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </form>

You have to bind to checked and pass it a false when the selected value no longer matches the radio buttons value.

[spdi]

There is radioGroup property for mat-radio-button in Angular 6 and Material 6.4.7 so my workaround is:

<form [formGroup]="reactiveForm">
    <mat-radio-group #rGroup formControlName="radioValue">

        <mat-radio-button value="val1" radioGroup="rGroup">Val1</mat-radio-button>
        <input type="text" formControlName="...">

        <mat-radio-button value="val2" radioGroup="rGroup">Val2</mat-radio-button>
        <input type="text" formControlName="...">

        <mat-radio-button value="val3" radioGroup="rGroup">Val3</mat-radio-button>
        <input type="text" formControlName="...">

        <button>Submit</button>
 
   </mat-radio-group>
</form>

I haven't tested it for nested radio groups.

[adrien-guyot]

[checked]="userRecord.controls.permission.value === listPermission.NONE"

Thank you @pos1tron . I was having issues with this and your help solves my problem. My project is on Angular 7.

<mat-radio-group name="delivery_service" formControlName="delivery_service" > <label for="delivery_service" class="col-md-12" >Assurez-vous un service de livraison assuré par vos livreurs ?</label > <div class="col-md-12"> <mat-radio-button value="true" [checked]="storeDetailsForm.value.delivery_service === true">Oui</mat-radio-button> <mat-radio-button value="false" class="offset-md-1" [checked]="storeDetailsForm.value.delivery_service === false" >Non</mat-radio-button > </div> </mat-radio-group>

[GustavoAngelCM]

https://stackblitz.com/edit/angular-slemqj-eszybx

[DzmVasileusky]

Oh I see, the problem is actually that mat-radio-button insn't implementing ControlValueAccessor at all. So yeah it won't work that way. It seems that mat-radio-group is required as a wrapper