Disabled Select dropdown not showing option value in Reactive Forms Angular 4 Application

0
votes

I have a very simple Dropdown in a Angular Form which is loading only one option where object name coming through rest service.

I also want to disable the dropdown based on some condition. I know I can't use [disabled] property on HTML elements in reactive forms. So I am stuck with two options. Either using [attr.disabled] or custom directive.

But both options not showing option value in disabled dropdown. Here is the code.

<select class="custom-select"
     name="objectName"
     id="objectName"
     formControlName="objectNameDropDown"
     [attr.disabled]="conditionTrue ? 'disabled': null"
     *ngIf="!someCondition; else loadDifferentDropdown;">
       <option>{{object.name}}</option>
</select>

I tried to use ngModel too but I think it is not needed. I also used custom Directive in place of [attr.disabled] but it is producing same result. Dropdown is disabled and empty. Option value is there but it is not coming as selected.

Note:- Above code is working fine if I place this dropdown out of angular form and use [disabled]="someCondition"

Any idea what I am doing wrong here?

2
javascripthtmlangularangularjs-directive
try this in component - this.form.get('objectNameDropDown').disable(); refer this link stackoverflow.com/questions/38377103/disable-select-in-angular2 – Prithivi Raj
just related... is there a reason why you are using a select if you only have one possible value? Wouldn't an input be better? :) – AJT82

2 Answers

0
votes

If you using reactive form, you have to disable it from formbuilder itself as below example

this.yourForm = this.formBuilder.group({
    objectNameDropDown: [{value:"", disabled: true}],  
});
0
votes

I had the same problem and I finally used something like this : 

this.form.getRawValue().objectNameDropDown;