Angular9响应式表单中如何添加多条件控制textarea禁用状态

问题原因 #

Angular 响应式表单场景下，不支持直接在模板中对绑定了 formControlName 的控件设置 disabled 属性，你在 FormControl 初始化时设定的禁用状态优先级更高，模板中写的固定/绑定的 disabled 不会生效，而且这种写法 Angular 本身会抛出状态不一致的警告。

解决方案 #

推荐方案（和响应式表单逻辑统一）

1. 先删除模板中 textarea 标签上的 disabled = "valid || checked || dep" 代码，控件的禁用状态统一通过 FormControl 实例的方法控制。
2. 监听你用于判断禁用状态的三个变量 valid、checked、dep 的变化，变量更新时同步修改表单控件的禁用状态：

// 变量变化时执行以下逻辑
const isDisabled = this.valid || this.checked || this.dep;
const departureControl = this.checkpointPassageForm.get('departureComment');
// 避免重复触发状态变更
if (isDisabled && !departureControl.disabled) {
  departureControl.disable();
} else if (!isDisabled && departureControl.disabled) {
  departureControl.enable();
}

3. 表单初始化时 departureComment 的 disabled 配置要和三个变量的初始状态保持一致，不要固定写死为 true。

临时兼容方案（不推荐，仅做参考）

如果要直接在模板控制，需要改成属性绑定，注意 disabled 属性只要存在就会生效，所以不满足条件时要返回 null：

<textarea
  nbInput
  fullWidth
  formControlName="departureComment"
  rows="5"
  [attr.disabled]="valid || checked || dep ? true : null"
></textarea>

该方案可能导致表单实例的状态和实际视图状态不一致，仅建议临时调试使用。

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