How to make ng-select disabled using Reactive forms?

Question

How can I make ng-select disabled? I tried [disabled] property, but it does not work here. Also tried to make it disabled using form control, but nothing works.

Stackblitz example

Did you try ng-disabled?

Dnl
– Dnl

2019-07-23 11:20:08 +00:00
Commented Jul 23, 2019 at 11:20 — Dnl
– Dnl, Commented Jul 23, 2019 at 11:20

nash11 · Accepted Answer · 2019-07-23 11:26:30Z

6

You can disable/enable a form control when you initialize it by setting disabled to true

creds.push(this.fb.group({
  fruitType: this.fb.control({value: 'Apple', disabled: true})
}));

To disable/enable the control later dynamically in your component. You can do so by calling the disable/enable methods for that particular form control.

// To enable form control
fruitType.enable();

// To disable form control
fruitType.disable();

answered Jul 23, 2019 at 11:26

nash11

8,7603 gold badges23 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Konstantin Kim Over a year ago

thanks, I forgot about this.fb.control to make it disabled, I just initialized it as a simple object.

Muhammed Albarmavi Over a year ago

@nash11 your answer is totally valid but I just add my answer as an extra information 👍 even it 's not mention in the documentation as it 's possible to pass an object for control initial value 😅😅

d1fficult · Accepted Answer · 2021-06-06 09:19:26Z

3

If you are looking to disable ng-select in html using any dynamic condition then you can use [readonly] property.

<ng-select 
formControlName="myControl"
[readonly]="condition_resolving_to_true_or_false" 
</ng-select>

answered Jun 6, 2021 at 9:19

d1fficult

1,10311 silver badges20 bronze badges

2 Comments

Dijo Over a year ago

Getting Error : Can't bind to 'readOnly' since it isn't a known property of 'ng-select'.

d1fficult Over a year ago

First check the your letters case, I have written all letters small not like you having having camelcase notation with O capital. Downvote any answer after carefully observing. @Dijo

Muhammed Albarmavi · Accepted Answer · 2019-07-24 13:01:44Z

2

you can set the value and the disabled state directly by pass an object same @nash11 example but without using this.fb.control it will be done internally

  addFruits() {
    const creds = this.form.controls.fruits as FormArray;
    creds.push(this.fb.group({
      fruitType: { value: 'Apple', disabled: true } // 👈
    }));
  }

in case you want to pass a validator you can use an array and the initial value is an object

  addFruits() {
    const creds = this.form.controls.fruits as FormArray;
    creds.push(this.fb.group({
      fruitType: [{ value: 'Apple', disabled: true },Validators.required] // 👈
    }));
  }

demo 🔥🔥

initialize form control object by FormBuilder

edited Jul 24, 2019 at 13:01

answered Jul 23, 2019 at 12:21

Muhammed Albarmavi

24.5k9 gold badges72 silver badges92 bronze badges

Collectives™ on Stack Overflow

How to make ng-select disabled using Reactive forms?

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related