禁用属性不适用于选择标签上的必需属性

Posted 2023-02-22

【中文标题】禁用属性不适用于选择标签上的必需属性

【英文标题】：disabled attribute doesn't work with required attribute on select tag

【发布时间】：2017-01-19 18:31:01

【问题描述】：

我有以下部分的html模板：

<div class="row">
    <div class="medium-3 columns">
        <label>Category
        <select [(ngModel)]="item.cat" name="cat" required>
            <option *ngFor="let a of categories" [ngValue]="a">a.name</option>
        </select>
        </label>
    </div>

    <div class="medium-3 columns">
        <label>Categoria
        <select [(ngModel)]="item.place" name="place" [disabled]="!item.cat">
            <option *ngFor="let c of places" [ngValue]="c">c.name</option>
        </select>
        </label>
    </div>
</div>

如您所见，第二个select 被禁用，直到用户从第一个选择中选择一个选项。因此，如果用户从第一个选择中选择一个选项，则第二个选择将变为活动状态。

现在我想将required 属性添加到第二个选择中。但如果我这样做，第二个select 总是被禁用。

这种行为是不是很奇怪？

这是Plunker（感谢 Stefan Svrkota）。

【问题讨论】：

好吧，我只是试图重新创建这个问题，但你的代码对我来说很好。这是您的代码预期行为的 plnkr，请查看：plnkr.co/edit/QX3LfN

您可能需要更新到最新的 Angular2 版本。

@GünterZöchbauer 我已经有了最新版本（RC6）。

@StefanSvrkota 您的代码可以工作，但不能满足我的需要。您在option 标签上添加disabled 而不是select。我希望第二个select 菜单的项目既不可选择也不可见。

谜团加深：如果 Angular 禁用标签存在积极条件，它就会起作用。例如，如果我使用 [disabled]="firstSelect" 而不是 [disabled]="!firstSelect" 它可以正常工作。

【参考方案1】：

[disabled] 作用于布尔表达式，如果表达式返回/评估为真，它将被禁用，否则不会。在您的情况下，您已将 disabled 属性与数值绑定。什么都不评估