Angular 2 MatDialog响应式表单报错：No value accessor for form control 'rating'

问题根源 #

你碰到的这两个错误，核心原因是Angular无法正确识别mat-select作为表单控件和MatFormField的合法子组件——大概率是模块导入不完整，再加上错误使用了ngDefaultControl（这个指令是给原生HTML控件用的，完全不适用于Angular Material组件）。

分步解决方案 #

按照下面的步骤逐一修复：

1. 确保模块导入完整
   检查你的ReviewDialogComponent所在的NgModule（比如单独的ReviewDialogModule或者包含它的父模块），必须导入以下关键模块：

   import { ReactiveFormsModule } from '@angular/forms';
   import { MatFormFieldModule } from '@angular/material/form-field';
   import { MatSelectModule } from '@angular/material/select';
   import { MatDialogModule } from '@angular/material/dialog';
   import { MatInputModule } from '@angular/material/input';
   
   @NgModule({
     imports: [
       // 你的其他模块
       ReactiveFormsModule,
       MatDialogModule,
       MatFormFieldModule,
       MatSelectModule,
       MatInputModule
     ],
     declarations: [ReviewDialogComponent]
   })
   export class YourTargetModule { }
   

   其中MatSelectModule是关键——它提供了mat-select的ControlValueAccessor实现，没有它Angular根本认不出这个表单控件。

2. 立刻移除ngDefaultControl指令
   这个指令是用来让Angular把原生<select>这类HTML控件当作表单控件处理的，而mat-select本身已经实现了表单控件的标准接口，加它反而会让MatFormField无法识别组件类型，直接删掉就能解决第二个错误。

3. 修正选项值的类型匹配
   你组件里的rating是number类型，但模板中mat-option的value写的是字符串（比如"1"），这会导致表单值类型不匹配。改成数字绑定：

   <mat-select placeholder="Select rating" formControlName="rating">
     <mat-option [value]="1">1</mat-option>
     <mat-option [value]="2">2</mat-option>
     <mat-option [value]="3">3</mat-option>
     <mat-option [value]="4">4</mat-option>
     <mat-option [value]="5">5</mat-option>
   </mat-select>
   

   这样表单返回的rating值会保持数字类型，和你组件中的定义一致。

4. 可选优化：添加空状态选项
   因为你的初始rating是null，可以加一个空选项提升用户体验：

   <mat-select placeholder="Select rating" formControlName="rating">
     <mat-option [value]="null">-- 请选择评分 --</mat-option>
     <mat-option [value]="1">1</mat-option>
     <!-- 其他选项 -->
   </mat-select>
   

验证修复 #

完成以上操作后重启项目，对话框应该能正常加载，表单控件也能正确绑定数据，不会再抛出错误。

内容的提问来源于stack exchange，提问作者Frey_ja