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.


});

Sunil · Accepted Answer · 2018-10-28 20:15:30Z

6

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>

answered Oct 28, 2018 at 20:15

Sunil

11.3k2 gold badges29 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

JBoothUA · Accepted Answer · 2018-10-28 21:18:05Z

0

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

answered Oct 28, 2018 at 21:18

JBoothUA

3,1976 gold badges23 silver badges48 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related