MatRadioButton: Error: No value accessor for form control with path...

[juristr]

What is the expected behavior?

I'm trying to use the mat-radio-button inside an HTML table (agreed, the form is a bit stange). It's an array of data, for each row I need 2 radio buttons. I'm constructing the FormArray dynamically and then bind it into the HTML.

Note: Being in a table, where each of the grouped radio buttons is inside it's own <td>, I cannot use <mat-radio-group> but that shouldn't be an issue as I'm using the name attribute as you would with native controls.

What is the current behavior?

Right now the behavior is that I'm getting an error saying No value accessor for form control with path: 'phoneNumbers -> 0 -> phone1' etc...and hence the databinding doesn't work.

On the other side, if I change nothing else, but the mat-radio-button with native HTML radio buttons, everything works as expected (see repro stackblitz below).

What are the steps to reproduce?

Providing a StackBlitz reproduction is the best way to share your issue.
StackBlitz starter: https://goo.gl/wwnhMV

Example using HTML native radio buttons: https://stackblitz.com/edit/angular-reactiveforms-dynamic-formarray-binding?file=app/person-edit.component.ts

(Failing) example using mat-radio-button: https://stackblitz.com/edit/angular-4k8hf4-3egfsd?file=app%2Fradio-overview-example.html

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

latest from the current docs (i.e. v7.2)

[pankajsharma2000]

I did something like this in formGroup and it took care of the error and worked as expected.

<mat-radio-group name="primaryGroup" formControlName="primaryCall"> <mat-radio-button radioGroup="primaryGroup" value="k">Primary</mat-radio-button> </mat-radio-group>

[mmalerba]

Updated the stackblitz, still seems to be a problem: https://stackblitz.com/edit/angular-4k8hf4-aqeava

[wosevision]

I also have a variation of this problem; the situation is different but the result is the same.

I have a FormGroup with three controls; each control needs to be represented as one radio button. Basically, exactly this setup as described in the Angular docs but with three different formControlNames and using <mat-radio-button> instead of regular old <input type="radio">.

So for example:

// component.ts
this.form = this.formbuilder.group({
  control_one: [false],
  control_two: [false],
  control_three: [false]
});

// component.html
<mat-radio-button [value]="true" formControlName="control_one">One</mat-radio-button>
<mat-radio-button [value]="true" formControlName="control_two">Two</mat-radio-button>
<mat-radio-button [value]="true" formControlName="control_three">Three</mat-radio-button>

Trying this setup results in the error described above: No value accessor for form control with path: 'control_one' etc. Do individual radio buttons not support use as controls?

[Cyberlane]

@wosevision did you find any sort of work-around for this? I'm currently stuck with this exact same problem, code very similar to what you shared.

[MarcioCamara]

I had the same error in NgZorro and found the solution in the link https://angularquestions.com/2020/11/17/angular-8-formarray-no-value-accessor-for-form-control-with-path/

basically I forgot to import the module of the date picker component I was trying to use I don't know if this happens the same way with Material, but it's worth checking

[TheMaakarov]

I'm having a similar problem with some text fields, as well. Unfortunately, @MarcioCamara 's link is failing right now, so I can't check it out.

In my case, the controls setup is as follows:

component.ts

// ...
private initFormGroup(): FormGroup {
  return this.formBuilder.group({
    names: this.newMultiLocFormGroup(this.nameValidators),
    descriptions: this.newMultiLocFormGroup(this.descValidators),
  });
}

private newMultiLocFormGroup(validators: ValidatorFn[]): FormGroup {
  let newGroup = this.formBuilder.group({});
  for (let loc of this.allLocs) {
    let newControl = {
      name: loc,
      control: new FormControl('', validators)
    };
    newGroup.addControl(newControl.name, newControl.control);
  }
  return newGroup;
}
// ...

this.allLocs looks something like this: ["en_US", "es_ES"]. So, after setup, the whole formGroup should be as follows:

FormGroup: {
  controls: {
    names: {
      controls: {
        en_US: FormControl {...},
        es_ES: FormControl {...},
      }
    },
    descriptions: {
      controls: {
        en_US: FormControl {...},
        es_ES: FormControl {...},
      }
    }
  }
}

Indeed, when I log it, it does look like that. The problem is, the error No value accessor for form control with path: 'names -> en_US' shows up when invoking mat-form-field in this file:

component.html

<!-- ... -->
<div fxLayout="row" formGroupName="names">
    <div *ngFor="let locName of names.controls | keyvalue">

       <mat-form-field [formControl]="locName.value" [formControlName]="locName.key">
            <!-- Do stuff -->
        </mat-form-field>

    </div>
</div>
<!-- ... -->

So yes, it is basically looks like the same error. I am sure there is probably a workaround, but this feels like the correct way of doing it.

[DzmVasileusky]

Same for me with template driven forms when I'm using mat-radio-button inside a component wrapper like this:

<mat-radio-button
    (change)="onMaterialChange($event)"
    [aria-describedby]="ariaDescribedby"
    [aria-label]="ariaLabel"
    [aria-labelledby]="ariaLabelledby"
    [(ngModel)]="model"
    [disableRipple]="true"
    [disabled]="disabled"
    [id]="id"
    [labelPosition]="labelPosition"
    [name]="name"
    [required]="required"
    [value]="value"
    color="primary"
>
    <ng-content></ng-content>
</mat-radio-button>