Components: Radio Button not support formControlName in reactive form

[ivanKoretskyy]

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.

` name="delivery_service"
formControlName="delivery_service"
>

Assurez-vous un service de livraison assuré par vos livreurs
?

            <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