PrimeNG p-dropdown搭配formGroup使用报ngModel注册表单控件错误如何解决

这个报错的核心原因是响应式表单API和模板驱动表单API混用冲突，你使用formGroup/formControlName的响应式表单方案时，不需要也不能同时使用模板驱动的ngModel/name等属性，按以下步骤排查修改即可：

• 第一步：检查对应组件的TS文件中，FormGroup是否正确声明了对应名称的控件，必须和HTML中formControlName的取值完全匹配，示例代码：

import { FormGroup, FormControl } from '@angular/forms';

export class YourComponent {
  // 声明表单组
  public myForm: FormGroup = new FormGroup({
    // 必须包含名为city的控件，和HTML里的formControlName="city"对应
    city: new FormControl(null)
  });
  public cities = []; // 你的下拉选项数据
}

• 第二步：修正HTML中的p-dropdown代码，移除所有模板驱动表单相关的冗余属性，包括name、ngModel、[ngModelOptions]，只保留响应式表单需要的formControlName即可，同时确认下拉组件包裹在绑定了对应FormGroup的父元素内，修正后的代码示例：

<!-- 父元素必须绑定formGroup -->
<div [formGroup]="myForm">
  <p-dropdown 
    [options]="cities"  
    placeholder="请选择城市 *"  
    optionLabel="name" 
    [showClear]="true"
    formControlName="city" 
    id="city"
  ></p-dropdown>
</div>

• 第三步：检查模块导入是否正确，当前组件所属的模块必须导入ReactiveFormsModule才能使用响应式表单API，同时要导入PrimeNG的DropdownModule：

import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { DropdownModule } from 'primeng/dropdown';
import { YourComponent } from './your.component';

@NgModule({
  declarations: [YourComponent],
  imports: [
    // 其他依赖模块
    ReactiveFormsModule,
    DropdownModule
  ]
})
export class YourModule { }

注意：[ngModelOptions]="{standalone: true}"是你坚持要在FormGroup范围内使用ngModel时才需要加的配置，你现在已经用了formControlName走响应式表单方案，完全不需要用到ngModel相关的任何配置，直接删除所有相关代码即可。

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