Angular 4 select disabled无效

Question

我想select在Angular 4中select禁用.我编写了如下代码,但未禁用.

在组件中:

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

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

在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>

当我添加[disabled]="true"到option标记中时,该选项标记被禁用,但我想禁用select标记本身.

我试过这样的 -

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

但是,当我从true->false或更改状态变量时,这也无效false->true

Answer 1

在阅读了一些文档和其他内容后,我发现这个approcah正在为我工​​作

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

希望能帮助到你.

这是stackblitz的链接

Answer 2

您将模板驱动方式与反应形式方式混合的那种。最好选择一种方法。在这种情况下，在您的打字稿中执行： control.disable()

特别是为了您的目的，它将是：

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

请注意，您将在初始表单设置后进行设置。