Getting an error while using angular material mat-select with reactive form

Question

I am trying to use angular material mat-select with reactive forms and getting an error as "No value accessor for form control with name: 'productUnitofMeasure'".

The other FormControls are working fine here, I have included all the required modules in the app module.

app.module:

import {MatFormFieldModule, MatOptionModule, MatSelectModule, MatInputModule} from '@angular/material';

imports:[
MatFormFieldModule,
MatOptionModule,
MatSelectModule,
MatInputModule,
ReactiveFormsModule]

template:

<mat-form-field>
<mat-select placeholder="Unit Type">
    <mat-option *ngFor="let unitType of unitList" matInput formControlName="productUnitofMeasure" [value]="unitType.unitId">{{unitType.unitDescription}}</mat-option>
</mat-select>

component:

this.productForm = new FormGroup({
  productName: new FormControl,
  productDescription: new FormControl,
  productPrice: new FormControl,
  productAvailableQuantity: new FormControl,
  productUnitofMeasure: new FormControl //this is the only control giving me an error.


});

Answer 1

You should use formControlName in mat-select not in mat-option

<mat-form-field>
<mat-select placeholder="Unit Type" formControlName="productUnitofMeasure" >
    <mat-option *ngFor="let unitType of unitList" matInput [value]="unitType.unitId">{{unitType.unitDescription}}</mat-option>
</mat-select>

Answer 2

I ran into this same exact issue recently. There is an issue with 3rd party components and reactive forms.. I found a pretty easy solution. This was by far what makes the most sense I believe.

Looking at your error I believe it's the same thing...

Here is a StackBlitz with a working example, but basically you're going to want to implement the ControlValueAccessor.

https://stackblitz.com/edit/mat-select-with-controlvalueaccessor

Additionally as mentioned in another answer:

You should use formControlName in mat-select not in mat-option