如何通过编程方式禁用ngx-select-ex选择器？

你遇到的这个错误是Angular响应式表单的典型提示——响应式表单不允许通过模板中的[disabled]属性来控制控件状态，因为响应式表单的设计理念是让组件类统一管理表单控件的状态（包括禁用/启用），模板里的属性绑定会和FormControl内部的状态产生冲突。

不过完全可以通过编程方式用变量来控制控件的禁用状态，只是要换一种符合Angular规范的方式：

步骤1：移除模板中的[disabled]绑定 #

先把模板里的[disabled]="disabledTypeSelectors"去掉，修改后的ngx-select标签如下：

<ngx-select id="ngxControl" [formControl]="ngxControl" [allowClear]="true" [items]="items" placeholder="No city selected">
</ngx-select>

步骤2：通过FormControl API控制禁用状态 #

在组件类里，直接调用FormControl的enable()和disable()方法来切换状态，修改你的enableDisable方法：

enableDisable() {
  // 切换控件的禁用/启用状态
  this.ngxControl.disabled ? this.ngxControl.enable() : this.ngxControl.disable();
}

如果需要和你的disabledTypeSelectors变量保持同步（比如变量初始值需要影响控件状态），可以在组件初始化时设置一次，或者同步更新变量和控件状态：

ngOnInit() {
  // 初始化时根据变量值设置控件状态
  this.disabledTypeSelectors ? this.ngxControl.disable() : this.ngxControl.enable();
}

enableDisable() {
  this.disabledTypeSelectors = !this.disabledTypeSelectors;
  // 根据更新后的变量值切换状态
  this.disabledTypeSelectors ? this.ngxControl.disable() : this.ngxControl.enable();
}

额外提示 #

如果调用disable()或enable()时不想触发表单的valueChanges事件，可以传入配置参数：

this.ngxControl.disable({ emitEvent: false });

这种方式既符合Angular响应式表单的最佳实践，也能完美实现你想要的“通过变量编程式禁用控件”的需求，同时不会再出现那个错误提示。

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