CODEWITHSUNDEEP
angulartypescriptgetelementbyid
codowo
codowo

Reputation: 33

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

template 

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

component 

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

Upvotes: 3

Views: 22325

Answers (4)

Gourav Kajal
Gourav Kajal

Reputation: 261

Just use CSS property 'pointer-events: none' on your control.

Upvotes: 1

Muhammed Albarmavi
Muhammed Albarmavi

Reputation: 24406

when you are use reactive forms you can disable any form control by he disable method of the from control like this 

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

it 'is look like the author doesn't implement control accessor interface correctly in case you try to set the disabled property in the template ,while it will work but you will got a warning

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) });

this just work around this bug so to keep the disable value base of the form control we can you disabled property base of the form control disable value

component 

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

template

    <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 🔥🔥

Upvotes: 0

Andrei Tătar
Andrei Tătar

Reputation: 8295

Should be more like:

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

and in control:

public isDropdownDisabled = false;

someMethod() {
  this.isDropdownDisabled = true;
}

Upvotes: 3

Seba Cherian
Seba Cherian

Reputation: 1793

Try using 

disabled="true"

It will disable your dropdown.

Upvotes: 1

Related Questions