Angular 4 select disabled is not working

Question

I want to disable select in Angular 4. I wrote code like below but select is not disabled.

In the component:

import { FormBuilder, Validators, FormGroup } from '@angular/forms';    

this.eventForm = this.formBuilder.group({
    // ... some codes ...
    'state': [true, Validators.required],
    'stepStrengh': [10, Validators.nullValidator]
});

In HTML:

<input type="radio" formControlName="state" [value]="true"/> Enable Step
<input type="radio" formControlName="state" [value]="false"/> Disable Step

<select formControlName="stepStrengh" [disabled]="!eventForm.get('timeslots').value">
  <option [ngValue]="10">10 steps</option>
  <option [ngValue]="15">15 steps</option>
</select>

When I add [disabled]="true" into option tag, then that option tag is disabled, but I want to disable the select tag itself.

And I tried like this -

<select formControlName="stepStrengh" disabled="{{state ? '': 'disabled'}}">

But this is also not working, when I change the state variable from true->false or false->true

Answer 1

After reading some docs and other stuff I found out that this approach is working for me

<select [attr.disabled]="state ? '' : null" formControlName="stepStrengh" >

hope it helps.

Here is a link to stackblitz

Answer 2

Your kind of mixing the template driven way with the reactive form way. It's best to choose one approach. In this case in your typescript do: control.disable()

Specifically for your purpose it would be:

this.eventForm.get('stepStrengh').disable();

Note you would set this AFTER your initial form set-up.