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

[kelumKP]

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'_

[ciesielskico]

Import FormsModule and ReactiveFormsModule

[josephperrott]

It looks like the issue you are seeing is with form usage and not specific to <mat-radio-button>. It appears your naming is not consistent between your FormGroup and the name of the elements in the form.

Please keep GitHub issues for bug reports / feature requests. Better avenues for troubleshooting / questions are stack overflow, gitter, mailing list, etc.

[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.

[vsilva472]

I'm using <mat-radio-group formControlName="..."> with reactive forms and this works fine on "site" but when i run ng test command i gave the same error as the author.

The only way I managed to make this work in both cases (site and tests )was by addingngDefaultControl to the element.

Like this <mat-radio-group ngDefaultControl formControlName="...">...</mat-radio-group>.
Not sure if this is the best way to do this.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}