使用具有反应形式的角材料垫选择时出错答案

【问题标题】：Getting an error while using angular material mat-select with reactive form使用具有反应形式的角材料垫选择时出错
【发布时间】：2019-04-01 19:02:56
【问题描述】：

我正在尝试将角度材料 mat-select 与反应形式一起使用，并收到错误消息“没有名称用于表单控件的值访问器：'productUnitofMeasure'”。

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

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.


});

【问题讨论】：

标签： angular angular-material angular7 angular-material-7

【解决方案1】：

你应该在mat-select中使用formControlName而不是在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>

【讨论】：

【解决方案2】：

我最近遇到了同样的问题。 3rd 方组件和响应式表单存在问题。我找到了一个非常简单的解决方案。到目前为止，这是我认为最有意义的。

看看你的错误，我相信这是一回事......

这是一个带有工作示例的 StackBlitz，但基本上你会想要实现 ControlValueAccessor。

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

另外在另一个答案中提到：

你应该在 mat-select 中使用 formControlName 而不是在 mat-option 中

【讨论】：