Disabling input field based on radio button in Ang

Question

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.

Answer 1

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