Angular 12中通过指令禁用ng-select无效问题求助

核心原因 #

ng-select是Angular组件而非原生DOM元素，直接操作DOM的disabled属性、添加类名或修改内部input的状态无法同步组件内部的禁用逻辑，必须通过组件实例的属性或表单控件状态来控制。

可行方案 #

方案1：针对模板驱动表单（使用ngModel）

直接注入NgSelectComponent实例，设置其disabled属性：

import { Directive, OnInit } from '@angular/core';
import { NgSelectComponent } from '@ng-select/ng-select';

@Directive({
  selector: '[appDisableNgSelect]'
})
export class DisableNgSelectDirective implements OnInit {
  constructor(private ngSelect: NgSelectComponent) {}

  ngOnInit(): void {
    // 可根据业务逻辑调整触发时机
    setTimeout(() => {
      this.ngSelect.disabled = true;
    }, 1000);
  }
}

方案2：针对响应式表单（使用formControlName）

通过关联的FormControl实例调用disable()方法，或设置ng-select的readonly属性：

import { Directive, OnInit, Optional } from '@angular/core';
import { NgSelectComponent } from '@ng-select/ng-select';
import { NgControl } from '@angular/forms';

@Directive({
  selector: '[appDisableNgSelect]'
})
export class DisableNgSelectDirective implements OnInit {
  constructor(
    private ngSelect: NgSelectComponent,
    @Optional() private ngControl: NgControl
  ) {}

  ngOnInit(): void {
    setTimeout(() => {
      if (this.ngControl?.control) {
        // 禁用表单控件，同步ng-select状态
        this.ngControl.control.disable();
        // 若需保留表单值仅禁止交互，可改用readonly
        // this.ngSelect.readonly = true;
      }
    }, 1000);
  }
}

使用方式 #

在ng-select标签上添加指令即可：

<!-- 模板驱动表单 -->
<ng-select appDisableNgSelect [(ngModel)]="selectedValue"></ng-select>

<!-- 响应式表单 -->
<ng-select appDisableNgSelect formControlName="currency"></ng-select>

原尝试无效的原因 #

你之前直接操作DOM元素的disabled属性、添加disabled类或修改内部input状态，这些操作无法触发ng-select组件内部的状态变更逻辑。ng-select的禁用状态由组件自身的disabled/readonly属性，或关联表单控件的状态驱动，必须通过官方暴露的API控制才能生效。

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