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>

当我在option标签中添加[disabled]="true"时，该选项标签会被禁用，但我想禁用select标签本身。我尝试过以下方法 -

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

但是这个也不起作用，当我将状态变量从 true->false 或者 false->true 改变时。

- user7601186

---

在您上面的代码片段中，状态被设置为false。当状态被设置为true时，应该将其禁用。 - user184994

状态变量将从true更改为false，从false更改为true！但选择不会更改。更改问题的初始状态。 - user7601186

好的，请稍等。我现在会做。 - user7601186

哈哈，这很有趣。当我删除 formControlName="stepStrengh" 后，所有的工作都像你所期望的那样正常运行。 - Kraken

但我正在使用FormBuilder创建表单。 - user7601186

Answer 1

在阅读了一些文档和其他东西之后，我发现这种方法对我有效。

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

希望这有所帮助。

这是一个指向 StackBlitz 的链接

- Kraken

---

实际上，这是不正确的。使用disabled="state"而不是[disabled]="state"，它只是将disabled设置为字符串state，而不是变量的值。 - user184994

如果我这样做，当我改变状态变量时，我想要交换选择以启用/禁用。 - user7601186

我改了，这只是一个字符串，我的错。 - Kraken

我尝试过这样写，disabled="{{ state ? '' : 'disabled' }}" 但是当我改变状态变量时，它并没有起作用。 - user7601186

谢谢。已点赞。但我的声望太低了，点赞数没有变化..:( - user7601186

@ShineHan 如果这条回答对你有帮助，你可以将其标记为正确答案。请在投票下方操作。 - Kraken

Answer 2

你有点混淆了模板驱动方式和响应式表单方式。最好选择一种方法。在这种情况下，你可以在 TypeScript 中使用 control.disable()。

对于你的特定目的，可以这样做：

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

请注意，你需要在初始化表单设置之后进行设置。

- Andrew Howard

---

谢谢您的回答。但是您能给我更详细的信息吗？ - user7601186

这是正确的答案！ - undefined