Angular 4 select disabled 不起作用答案

【问题标题】：Angular 4 select disabled is not workingAngular 4 select disabled 不起作用
【发布时间】：2021-06-11 03:22:48
【问题描述】：

我想在 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 更改状态变量时

【问题讨论】：

在上面的代码 sn-p 中，state 设置为 false。当 state 设置为 true 时，应该禁用它
状态变量会被改变 true->false, false-> true !!但选择没有改变。更改了问题的初始状态。
好的，你能创建一个 stackblitz 来重现错误吗？
好的。等一等。我现在就做
大声笑，这很有趣，当我删除 formControlName="stepStrengh" 时，所有工作都像你一样，正如预期的那样

标签： angular drop-down-menu

【解决方案1】：

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

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

希望对你有帮助。

Here is a link to stackblitz

【讨论】：

其实这是不正确的。通过使用disabled="state" 而不是[disabled]="state"，它只是将disabled 设置为字符串state 而不是变量的值
如果我这样做，当我更改状态变量时，我想将选择交换为启用/禁用。
我变了，这只是一个字符串我的错
我试过这样， disabled="{{ state ? '' : 'disabled' }}" 但是当我更改状态变量时这不起作用。
谢谢。赞成。但我的名声太低了。赞成票数没有改变..:(

【解决方案2】：

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

专门针对您的目的：

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

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

【讨论】：

感谢您的回答。但是你能给我更多的详细信息吗？