Angular 17中p-dropdown的disabled属性与formControlName共存时失效

在Angular响应式表单体系中，当控件通过formControlName绑定到表单组时，模板中的[disabled]属性优先级会被表单控件自身的状态覆盖。Angular 17对表单状态的一致性校验更严格，同时PrimeNG的p-dropdown组件在新版本中也遵循了Angular响应式表单的最佳实践——控件的禁用状态应由表单控件实例控制，而非模板属性，这就是绑定formControlName后[disabled]失效的核心原因。

正确解决方案（推荐） #

1. 初始化表单时设置禁用状态 #

在组件类中创建FormGroup时，直接为目标控件指定disabled状态：

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

// 组件类内部定义
yourForm: FormGroup;

constructor(private formBuilder: FormBuilder) {
  this.yourForm = this.formBuilder.group({
    // 初始化时设置禁用，value可填默认值或空字符串
    signatures: [{ value: '', disabled: true }]
  });
}

2. 动态切换禁用/启用状态 #

如果需要在运行时根据条件切换控件状态，使用表单控件的disable()和enable()方法：

// 禁用signatures控件
this.yourForm.get('signatures')?.disable();

// 启用signatures控件
this.yourForm.get('signatures')?.enable();

模板代码无需保留[disabled]属性，保持如下即可：

<p-dropdown 
  formControlName="signatures" 
  placeholder="Please Select Signature" 
  [options]="signatureOptions" 
  (onChange)="selectSignature($event,rowIndex)">
</p-dropdown>

备选方案（不推荐） #

如果坚持通过模板属性控制，可使用[attr.disabled]强制设置HTML原生属性，但这会破坏响应式表单的状态一致性，不建议在生产环境使用：

<p-dropdown 
  formControlName="signatures" 
  [attr.disabled]="true" 
  placeholder="Please Select Signature" 
  [options]="signatureOptions" 
  (onChange)="selectSignature($event,rowIndex)">
</p-dropdown>

内容的提问来源于stack exchange，提问作者Syed Ali Akbar