禁用Angular 4 Select无效 [英] Angular 4 select disabled is not working

问题描述

我想在Angular 4中禁用 select 。
我写了如下代码，但 select 是

在组件中：

  import {FormBuilder，验证者，FormGroup}，来自 @ angular / forms； 
 
 this.eventForm = this.formBuilder.group（{
 // ...一些代码... 
'state'：[true，Validators.required]，
'stepStrengh'：[10，Validators.nullValidator] 
}）; 
  

在HTML中：

 <输入类型= radio formControlName =状态 [value] = true />启用步骤
<输入type = radio formControlName = state [value] = false />禁用步骤
 
<选择formControlName = stepStrengh [disabled] =！eventForm.get（’timeslots）.value> 
< option [ngValue] = 10> 10个步骤< / option> 
< option [ngValue] = 15> 15个步骤< / option> 
< / select> 
  

当我添加 [disabled] = true 放入 option 标记，则该选项标记被禁用，但是我想禁用 select 标记本身。 / p>

我尝试过这样-

 < select formControlName = stepStrengh disabled = {{state？''：'disabled'}}> 
  

但这在我将状态变量从更改为true时也不起作用-> false 或 false-> true

解决方案

在阅读了一些文档和其他内容后，我发现此方法正在为我工​​作

 < select [ attr.disabled] = state？：null formControlName = stepStrengh> 
  

希望有帮助。

这里是stackblitz的链接

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

解决方案

After reading some docs and other stuff i found out that this approcah is working for me

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

hope it helps.

Here is a link to stackblitz

这篇关于禁用Angular 4 Select无效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！