'mat-radio-button' throwing no value accessor for form control

I just tried to bind formcontrolName with mat-radio-button

HTML

<div [formGroup]="sampleFormGroup"> 
  <mat-radio-group class="radio-btn-wrapper">
     <mat-radio-button id="sample" (click)="valuechange('sampleVal')" name="sample" value="sampleVal" [checked]="sampleVal" formControlName="sampleType"></mat-radio-button>                                            
  </mat-radio-group>
</div>  

TypeScript

sampleType = new FormControl('', []);

 ngOnInit() {


        this.sampleFormGroup = new FormGroup({
            sampleType: this.sampleType          
        })
    }

but I’m getting console error as

No value accessor for form control with name: 'sample'

[tfalvo]

Try to set formControlName="sampleType" on <mat-radio-group> and not on <mat-radio-button>. It should works.

[inthegarage]

@josephperrott I would like this ticket reopened as with the example code taken from the material site a spec fails with the same error:

<mat-radio-group class="example-radio-group" [(ngModel)]="favoriteSeason">
  <mat-radio-button class="example-radio-button" *ngFor="let season of seasons" [value]="season">
    {{season}}
  </mat-radio-button>
</mat-radio-group>
<div class="example-selected-value">Your favorite season is: {{favoriteSeason}}</div>

Taken from this link: https://material.angular.io/components/radio/examples

You have to stop using the ngModel way of doing things to get this to work and that doesn’t seem right to me.

The error again is: Error: No value accessor for form control with unspecified name attribute

Either the documentation isn’t quite right or mat-radio-group should support the ngModel. I can create a new ticket if needed.