Angular 4 select disabled无效

Question

我想在Angular 4中禁用select。我编写的代码如下，但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

在阅读了一些文档和其他内容后，我发现这种方法对我有用

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

希望能帮助到你。

Here is a link to stackblitz

Answer 2

您的模板驱动方式与反应形式混合。最好选择一种方法。在这种情况下你的打字稿做：control.disable（）

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

。this.eventForm.get（ 'stepStrengh'）禁用（）;

请注意，您将在初始表单设置后设置此项。