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

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

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

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>

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.


});

angular angular-material angular7 angular-material-7
person ironman    schedule 28.10.2018    source источник

Ответы (2)


arrow_upward
5
arrow_downward

Вы должны использовать 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>
person Sunil Singh    schedule 28.10.2018

arrow_upward
0
arrow_downward

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

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

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

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

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

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

person JBoothUA    schedule 28.10.2018