ng-select disable form control not working in reactive form angular

Question

I was trying to setvalue to my form and would like to disable the form.

Somehow if I setvalue to form it is working fine but as soon I write disable method my ng-select value is going out.

Have anyone faced same issue while disabling the ng-select with values?

form = new FormGroup({
    code: new FormControl()
});

values = [{
        value: "0"
        label: "test1"
    },
    {
        value: "1"
        label: "test2"
    }
]
//I am setting values using setvalue and disbling after wards
this.form.controls['code'].setValue('0')
this.form.disable();

<ng-select formControlName="code" [items]="values" bindValue="value" labelForId="code"
[clearable]="false" [selectOnTab]="true" placeholder="Select one" data-e2e-id="code">
</ng-select>

Oleksii Pavlenko · Accepted Answer · 2020-10-30 16:23:11Z

1

Are you sure that you change value?

Method to set value:

Methods using setValue()

this.form.get("code").setValue('0');
this.form.controls["code"].setValue('0');

Methods using patchValue()

this.form.get("code").patchValue('0');
this.form.controls['code'].patchValue('0');
this.form.patchValue({"code": '0'});

In you case could be the problem that form updates only after applying disablibg and you doesn`t see that you update filed on a wrong way

edited Oct 30, 2020 at 16:23

answered Oct 30, 2020 at 16:16

Oleksii Pavlenko

1,3331 gold badge12 silver badges25 bronze badges

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

2 Comments

app Over a year ago

yeah.. sorry edited my question.. I am still seeing the issue even after setting value

Oleksii Pavlenko Over a year ago

can you reproduce it, because I copy paste your code and it work

Kavinda Senarathne · Accepted Answer · 2020-10-31 03:13:52Z

1

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

users.push(this.fb.group({
  userType: this.fb.control({value: 'Admin', disabled: true})
}));

You can do so by calling the disable/enable methods for that particular form control to perform it dynamically.

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

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

answered Oct 31, 2020 at 3:13

Kavinda Senarathne

2,01015 silver badges16 bronze badges

Collectives™ on Stack Overflow

ng-select disable form control not working in reactive form angular

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related