Question

我正在尝试将角形材料的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.


});

Answer 1

您应该在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>

Answer 2

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

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

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

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

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

您应该在mat-select中使用formControlName，而不要在mat-option中使用

在使用角形材料以反应形式进行垫选时出现错误

2 个答案: