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

Question

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?

Answer 1

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

Answer 2

我遇到了同样的问题，我终于使用了这样的东西：

this.form.getRawValue().objectNameDropDown;