Получение ошибки при использовании углового материала mat-select с реактивной формой

Question

Я пытаюсь использовать угловой материал mat-select с реактивными формами и получаю сообщение об ошибке «Нет доступа к значению для элемента управления формы с именем: 'productUnitofMeasure'".

Здесь другие отлично работают,Я включил все необходимые модули в модуль приложения.

app.module:

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

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

шаблон:

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

компонент:

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

Недавно я столкнулся с той же самой проблемой.Существует проблема со сторонними компонентами и реактивными формами. Я нашел довольно простое решение.Это было безусловно то, что имеет больше смысла, я верю.

Глядя на вашу ошибку, я считаю, что это то же самое ...

Вот StackBlitz с рабочим примером, но в основном вы захотите реализовать ControlValueAccessor.

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

Кроме того, как упоминалось в другом ответе:

Вы должны использовать formControlName в mat-select, а не в mat-option

Answer 2

Вы должны использовать formControlName в mat-select, а не в 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>