向FormControl构造函数传入'disabled'状态无效的问题求助

我之前也踩过一模一样的坑！你遇到的这个问题，核心是Angular响应式表单里设置禁用状态的方式很容易搞混，不是直接把disabled塞进构造函数的状态配置对象里就行的。

先给你说两种靠谱的解决办法：

1. 初始化FormControl时直接禁用 #

如果控件从一开始就要处于禁用状态，你得把值和禁用状态打包成一个对象作为构造函数的第一个参数，而不是放在第二个参数的验证器配置里：

// 正确写法
this.usernameControl = new FormControl(
  { value: '默认值', disabled: true }, // 第一个参数是包含value和disabled的对象
  Validators.required // 第二个参数放验证器（可选）
);

你之前大概率是这么写错的：

// 错误写法：disabled放在第二个参数里完全无效
this.usernameControl = new FormControl(
  '默认值',
  { disabled: true } // 这里的配置只针对验证器，不处理禁用状态
);

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

如果需要在组件逻辑里动态改变控件状态，直接用FormControl实例的disable()和enable()方法就好，这也是Angular官方推荐的方式，能完美避免模板里用[disabled]导致的changed after checked错误：

// 禁用控件
this.usernameControl.disable();

// 启用控件
this.usernameControl.enable();

// 要是不想触发值变更事件，可以加参数
this.usernameControl.disable({ emitEvent: false });

为什么你按提示操作还是无效？大概率是初始化时的参数位置搞错了——很多人都会误以为第二个参数的配置对象能控制禁用状态，但实际上那个对象只用来配置验证器（validators/asyncValidators）和更新策略（updateOn），禁用状态属于控件的初始值配置的一部分，得放在第一个参数里。

另外要注意：一旦用代码设置了控件的禁用状态，模板里的[disabled]绑定会被Angular忽略，这是刻意的设计，就是为了避免模板和类里的状态冲突，所以一定要统一在组件类里通过控件实例来管理禁用状态。

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