Angular: How do I enable and disable a textbox by clicking a checkbox?

Question

I am using Angular and TypeScript, and trying to enable/disable a textbox using a checkbox.

app.component.html

<input type="checkbox" value="true" (click)="check_en(value)">
<input type="text" id="text1" disabled>

app.component.ts

check_en(v1: any){
  if(v1 == true){
    document.getElementById('text1').setAttribute("disabled", "false");                  
  } else {
    document.getElementById('text1').removeAttribute("disabled")    
  }    
}

Answer 1

Try to avoid modifying DOM directly with document.getElementById in Angular. You could achieve the same effect with other options.

Option 1: Two-way binding to the ngModel directive

Controller

export class AppComponent  {
  checkboxStatus: any;
  ...
}

Template

<input type="checkbox" [(ngModel)]="checkboxStatus" (click)="check_en(value)">
<input type="text" id="text1" [disabled]="!checkboxStatus">

Here we are two-way binding the value of the checkbox to the variable checkboxStatus using the ngModel directive.

---

Option 2: Template reference variable

Template

<input #inputCheck type="checkbox" (click)="check_en(value)">
<input type="text" id="text1" [disabled]="!inputCheck.checked">

Here a template reference variable inputCheck is used to refer to the checkbox within the DOM. Later it's property checked is bound to the text input property disabled to dynamically set it's value.

Answer 2

to set checkbox checked, you have to checked=true and not by value .

For Example:

<input type="checkbox" checked=true (click)="check_en(value)">