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

问题描述

说我有这些radiobutton，我点击功能localClick和第一个按钮它应该有1和第二给值2

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">

我google了一下并添加了这个东西，disabled = exampleFlag现在在ts文件中我设置了它根据点击哪个单选按钮得到真或假所以我这样做

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;
}
}

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

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.

我认为错误即时通讯是在html文件中定义（点击）事物的方式，也许在ts文件中，但我不确定。

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屋！