Angular中select标签的[disabled]属性设置后不生效问题求助

你遇到的问题属于Angular响应式表单的默认特性：当表单控件绑定了formControlName或formControl时，Angular会优先读取FormControl实例的禁用状态，模板中直接绑定的[disabled]输入属性会被忽略，因此会出现元素上已存在ng-reflect-is-disabled标记，但实际DOM未挂载disabled属性、禁用功能不生效的情况。

以下是两种可行的解决方案：

方案1：通过FormControl实例控制（官方推荐） #

• 表单初始化时直接指定初始禁用状态：

this.yourForm = this.formBuilder.group({
  actionSelected: [{ value: '', disabled: condition }]
})

• 需要动态切换禁用状态时，调用对应API即可：

if (condition) {
  this.yourForm.get('actionSelected').disable()
} else {
  this.yourForm.get('actionSelected').enable()
}

如果要根据变量实时切换状态，配合ngOnChanges生命周期或者变量的setter实现即可。

方案2：模板层绑定原生disabled属性 #

如果不想修改TS逻辑，可将[disabled]改为原生属性绑定：

<select formControlName="actionSelected" [attr.disabled]="condition ? true : null" >

注意条件不成立时必须返回null，因为HTML的disabled属性只要存在就会触发禁用效果，返回null时该属性不会挂载到DOM上，控件才能正常启用。

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