Angular 5 - 禁用单选按钮

Posted 2023-03-05

【中文标题】Angular 5 - 禁用单选按钮

【英文标题】：Angular 5 - Disabling Radio Buttons

【发布时间】：2018-05-05 07:47:08

【问题描述】：

我在 Angular 5 中有一个单选按钮组。我想禁用一些选项，使用 [disabled] 属性。但是，我注意到只有第一个单选按钮实际上被禁用。见我的小伙伴：http://plnkr.co/edit/JzFmvjUyvhPdTkbYT1YZ?p=preview

即使我硬编码[disabled]="true"，它仍然不会禁用第二个单选按钮。我不想切换到使用<select>，所以我很好奇是否有另一种方法可以使用单选按钮。

【问题讨论】：

您在使用模板驱动的表单吗？反应形式？根本没有表格？

模板驱动。

只是在模板中调用方法时相关...***.com/questions/37876533/…

我添加了一个简短的解释和解决问题的方法。我希望它有所帮助。

【参考方案1】：

可以有两种解决方案：-

1.使用禁用属性 ([attr.disabled])

解决此问题的一种方法是使用 disabled 属性 ([attr.disabled]) 而不是 disabled 属性 ([disabled])，但是 [attr.disabled] 的工作方式略有不同，要启用单选按钮，您需要将 null 传递给 [attr.disabled] 和任何非 null 值来禁用它。考虑下面的例子：-

<input type="radio" name="enabled" [attr.disabled]="null" />Enabled1
<input type="radio" name="enabled" [attr.disabled]="null" />Enabled2

<input type="radio" name="disabled" [attr.disabled]="false" />Disabled1
<input type="radio" name="disabled" [attr.disabled]="false" />Disabled2

在本例中，名为“已启用”的单选按钮集将被启用，因为它们的 [attr.disabled] 设置为 null，而名为“已禁用”的单选按钮集将被启用尽管 [attr.disabled] 被设置为“false”，但仍被禁用，这是因为 false 是一个非空值。

2。使用字段集标签

另一个更好的解决方案是使用

标签将单选按钮组合在一起，然后在该 上设置 [disabled] 属性

标记而不是单个单选按钮。以下是相同的示例：-

<fieldset [disabled]=true>
    <input type="radio" name="test" />yes
    <input type="radio" name="test" />no
</fieldset>

【讨论】：

fieldset 技巧太棒了?我喜欢 html

【参考方案2】：

像[attr.disabled]="isDisabledState === true"这样可以正常工作

并且在组件类中你可以有isDisabledState: boolean = true

【讨论】：

也许我做错了什么，但这只是设置disabled="true"和disabled="false"，它总是被解释为禁用。

我认为@DrNio 得到的是类似于下面的内容，您有一个解释真/假条件的属性，然后单选按钮将根据该属性被禁用或启用。 ` 是 No` export class App name:string; isDisabled: boolean = true; 然后你可以添加一个函数来切换isDisabled 状态

使用 [attr.disabled]="" 而不是 [disabled]="" 为我工作。这在 *ngFor 的上下文中也有效。

【参考方案3】：

解决此问题的一种方法是将禁用的绑定放置在组中的最后一个单选按钮上。这是您的代码的修改版本：http://plnkr.co/edit/v6S5G7Do5NAMKzZvNdcd?p=preview

<input type="radio" name="answer" value="Yes" [(ngModel)]="name" /> Yes
<input type="radio" name="answer" value="No" [(ngModel)]="name" [disabled]="isDisabled()" /> No

在禁用（使用 [禁用]）Angular 模板驱动的单选按钮时存在错误和设计问题。

我修复了这个拉取请求中的错误：https://github.com/angular/angular/pull/20310

设计问题是我们将 [disabled] 绑定放在单个单选按钮上，但受数据绑定影响的是所有组。这是说明问题的代码的修改版本：http://plnkr.co/edit/3yRCSPsdjXqhUuU9QEnc?p=preview

【讨论】：

没有什么可以阻止某人在每个单选按钮上设置单独的禁用条件，您应该能够禁用某些选项而不是其他选项。在我的真实场景中，我有批准和拒绝的单选按钮，在某些情况下，应该禁用一个或另一个，也许两者都禁用。也就是说，我理解 javascript 库唯一标识同名单选按钮所面临的挑战。

所以在你的情况下 [disabled] 将不起作用（这里是一个例子plnkr.co/edit/3yRCSPsdjXqhUuU9QEnc?p=preview）。解决方案是使用 [attr.disabled]。

【参考方案4】：

使用这个：（用于反应形式的方法）

 <input
    type="radio"
    id="primaryIPV6"
    value="2"
    [attr.disabled]="flagValue ? '' : null"
    formControlName="p_ip_type"
    (change)="optionalFn()">

从 .ts 类以编程方式设置 flagValue：

use -> null : false （null 将被解释为 false ） use -> true/'' : true (true 或简单的空白将被解释为 true)

【讨论】：

这个回答正确，似乎是正确的方法，谢谢！ @abhishek 我还是反应式的新手，这是反应式表单的推荐方式吗？

是的，确实如此。如果这对您的工作有帮助，请支持我的回答:)

【参考方案5】：

我最终作弊了。我没有为两个单选按钮使用相同的名称，而是给每个单选按钮一个唯一的名称并将它们绑定到相同的支持字段。 http://plnkr.co/edit/zNbODcAqZMgjXfluxhW6?p=preview

@Component(
  selector: 'my-app',
  template: `
    <form>
      Hello name!!!
      <input type="radio" name="answer1" value="Yes" [(ngModel)]="name" [disabled]="isDisabled1()" /> Yes
      <input type="radio" name="answer2" value="No" [(ngModel)]="name"  [disabled]="isDisabled2()" /> No
    </form>
  `,
)
export class App 
  name:string;
  isDisabled1(): boolean 
    return false;
  ,
  isDisabled2(): boolean 
    return false;
  

由于它们都绑定到同一个支持字段，因此它们最终是互斥的，表现出单选按钮应有的方式。它还允许它们被独立禁用。

在我的真实场景中，我实际上只使用(click) 事件进行单向绑定来设置绑定值，但这是相同的技巧。

【讨论】：

如果您稍后在单选按钮上添加验证器，您将遇到问题，因为有两个 FormControl。例如，您将无法检查是否选择了某个值。

【参考方案6】：

我正在使用 ionic，以下对我有用。

<ion-radio class="fix-radio_button" *ngIf="!IsSuspended" color="default" [disabled]="q.QuestionOptionId==q.AnswerId" [checked]="q.QuestionOptionId==q.AnswerId"></ion-radio>

【参考方案7】：

考虑到 DrNio 的答案，您应该使用 attr.disabled 并将值设置为 [value]="'Yes'"。这是因为分配为“是”会使角度将其评估为表达式而不仅仅是一个值。所以您的输入元素将是：

<input type="radio" name="answer" [value]="'Yes'" [(ngModel)]="name"   [attr.disabled]="isDisabled()"  />

【讨论】：

你检查过他的 plunker url 吗？使用相同的功能调用一个单选按钮被禁用，另一个不被禁用（在应用程序的初始化 - 没有点击任何地方）

【参考方案8】：

这是你更新的运行代码和朋克..

Update Plunker

@Component(
  selector: 'my-app',
  template: `
    <form>
      Hello name!!!
      <input type="checkbox" name="dus" [(ngModel)]="isDisabled">
      <input type="radio" name="answer" value="Yes" [(ngModel)]="name" [disabled]="isDisabled" /> Yes
      <input type="radio" name="answer" value="NO" [(ngModel)]="name"  [disabled]="isDisabled" /> No
    </form>
  `,
)
export class App 
  name = 'Yes';;
  isDisabled = true;

【讨论】：

isDisabled:true;应该是 isDisabled=true;