如何在 Typescript 中动态禁用或启用 ng-multiselect-dropdown

Question

模板

 <ng-multiselect-dropdown #Name [placeholder]="'Name'" [data]="data" 
    formControlName="name" [settings]="myNameTexts"(onDeSelectAll)="onNameDeSelect($this)"> 
  </ng-multiselect-dropdown>

组件

 document.getElementById("#Name").disabled= false

Answer 1

当您使用响应式表单时，您可以通过禁用 from 控件的方法来禁用任何表单控件

this.form.get('name').disable()

如果您尝试在模板中设置禁用属性，看起来作者没有正确实现控件访问器接口，虽然它可以工作，但您会收到警告

It looks like you're using the disabled attribute with a reactive form directive. If you set disabled to true when you set up this control in your component class, the disabled attribute will actually be set in the DOM for you. We recommend using this approach to avoid 'changed after checked' errors.

Example: form = new FormGroup({ first: new FormControl({value: 'Nancy', disabled: true}, Validators.required), last: new FormControl('Drew', Validators.required) });

这只是解决了这个错误，所以为了保持表单控件的禁用值基数，我们可以禁用属性表单控件禁用值的基数

组件

  get disabled() {
    return this.myForm.get('city').disable
  }

模板

    <form [formGroup]="myForm">
        <ng-multiselect-dropdown
            name="city"
            [placeholder]="'Select City'"
            [data]="cities"
            formControlName="city"
            [disabled]="disabled"
            [settings]="dropdownSettings"
            (onSelect)="onItemSelect($event)">
        </ng-multiselect-dropdown>
   </form>

demo

Answer 2

尝试使用

disabled="true"

它将禁用您的下拉菜单。

Answer 3

应该更像是：

<ng-multiselect-dropdown [disabled]="isDropdownDisabled" ...> 
  </ng-multiselect-dropdown>

并处于控制之中：

public isDropdownDisabled = false;

someMethod() {
  this.isDropdownDisabled = true;
}

Answer 4

只需在您的控件上使用 CSS 属性 'pointer-events: none'。

如何在 Typescript 中动态禁用或启用 ng-multiselect-dropdown

How to, dynamically disable or enable a ng-multiselect-dropdown in Typescript

getelementbyid

typescript

angular