基于 Angular 2 中的单选按钮禁用输入字段 [英] Disabling input field based on radio button in Angular 2

问题描述

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

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

现在我想要我的输入字段

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

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

exampleFlag=false;//最初将其设置为 false，这样框就不会被禁用本地点击(x){如果(x==1){this.exampleFlag=true;}别的{this.exampleFlag=false;}}

我在这里所做的基本上是，如果单击第一个单选按钮，则将其设置为 true(以便该框将被禁用)，否则无论是否选择任何按钮或是否选择了第二个单选按钮，都应启用它.

我对此很陌生，但我在谷歌上搜索了一些并提出了这样的解决方案，但是对我来说，无论我做什么，该框始终处于禁用状态.

我认为我犯的错误是在 html 文件和 ts 文件中定义(点击)事物的方式，但我不确定.

解决方案

用方括号括起来禁用以将其绑定到属性值.

Say i have these radiobutton, i make a click function localClick and for first button it should have 1 and second give value 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>

now i want my input field

Example

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

I googled a bit and added this thing, disabled=exampleFlag and now in the ts file i set it to true or false based on which radiobutton was clicked so i do

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

basically what im doing here is that if the first radiobutton is clicked then set it to true (so that the box will get disabled) but otherwise it should be enabled whether no buttons are selected or whether the 2nd radio button is selected.

I am new to this but i googled aa bit and came up to solutions like this however for me the box always stays disabled no matter what i do.

I think the mistake im making is the way the (click) thing is being defined in html file and maybe in the ts file also but im not sure.

解决方案

Wrap disabled in square brackets to bind it to an attribute value.

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

这篇关于基于 Angular 2 中的单选按钮禁用输入字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！