angular - 使用具有反应形式的 Angular Material 垫选择时出错

Question

我正在尝试将 Angular Material mat-select 与 react 形式一起使用，并收到错误消息“没有名称为“productUnitofMeasure”的表单控件的值访问器”。

其他 FormControls 在这里工作正常，我已经在应用程序模块中包含了所有必需的模块。

应用程序模块:

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

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>