基于Angular 2中的单选按钮禁用输入字段答案

【问题标题】：Disabling input field based on radio button in Angular 2基于Angular 2中的单选按钮禁用输入字段
【发布时间】：2017-12-08 03:31:54
【问题描述】：

假设我有这些单选按钮，我创建了一个单击函数 localClick，对于第一个按钮，它应该有 1，第二个给定值 2

<div class="ui-g-12"><p-radioButton name="group1" value="Local" (click)=localClick(1) label="Local"></p-radioButton></div>
<div class="ui-g-12"><p-radioButton name="group1" value="Remote" label="Remote" (click)=localClick(2) ></p-radioButton></div>

现在我想要我的输入字段

Example

 <input id="pass" type="text" style="width:80%" disabled="exampleFlag" pInputText [(ngModel)]="password">

我用谷歌搜索了一下并添加了这个东西，disabled=exampleFlag，现在在 ts 文件中，我根据单击的单选按钮将其设置为 true 或 false，所以我这样做了

exampleFlag=false; // set it to false initially so box is not disabled
localClick(x) {
if(x==1){
  this.exampleFlag=true;
}
else{
  this.exampleFlag=false;
}
}

基本上我在这里所做的是，如果单击第一个单选按钮，则将其设置为 true（以便该框将被禁用），否则无论未选择按钮还是选择第二个单选按钮，都应启用它。

我对此并不陌生，但我用谷歌搜索了一下，并想出了这样的解决方案，但对我来说，无论我做什么，盒子总是保持禁用状态。

我认为我犯的错误是在 html 文件中定义（点击）事物的方式，也可能在 ts 文件中，但我不确定。

【问题讨论】：

如果您想切换禁用属性，请尝试使用[attr.disabled]="exampleFlag ? 'disabled' : null"。
@ThinkingMedia 我通过将禁用放在方括号中来修复它
在 Angular 中有一个内置的禁用指令。使用 [disabled] 时，它使用该指令。我认为它只适用于一些 HTML 元素，如输入和按钮。使用内置可能会更好，因为它可能与表单控件一起使用。如果您想在另一个 DOM 元素上放置禁用。使用我给出的示例。

标签： javascript html angular typescript angular2-template

【解决方案1】：

用方括号包裹禁用以将其绑定到属性值。

<input id="pass" type="text" style="width:80%" [disabled]="exampleFlag" pInputText [(ngModel)]="password">

【讨论】：