使用反应形式的 angular material mat-select 时出错

Question

我正在尝试将 angular material mat-select 与反应形式一起使用，但出现 "No value accessor for form control with name: 'productUnitofMeasure'".

错误

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

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

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>

Answer 2

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

看着你的错误，我相信这是同一件事...

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

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

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

You should use formControlName in mat-select not in mat-option

使用反应形式的 angular material mat-select 时出错

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

angular-material

angular

angular7

angular-material-7