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

I'd strongly advise against manipulationg elements direclty. The whole point of Angular is (more or less) to do that for you ;) — jSebestyén
– jSebestyén, Commented Jun 9, 2020 at 7:45
Yes, as jBuchholz says, you have to go through the angular variables. Otherwise, you lose the benefits of the angular. Another thing, you should rather use 'if (v1)' or 'if (v1 === true)'. The first is shorter and the second is stricter. — Mickael Lherminez
– Mickael Lherminez, Commented Jun 9, 2020 at 7:58

Community · Accepted Answer · 2020-06-20 09:12:55Z

3

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.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jun 9, 2020 at 7:39

Barremian

31.2k4 gold badges37 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

knightfall Over a year ago

thank for guide me. I am not good with angular. Now I tyr to learn it.

Barremian Over a year ago

You could go through the Angular Tutorial here: angular.io/tutorial. It introduces some of the basics.

xr280xr Over a year ago

What does (click)="check_en(value)" do?

Barremian Over a year ago

@xr280xr: It is the Angular equivalent of JS onclick attribute. It registers the event handler check_en(value) to be triggered when the click event is emitted. More info on Angular binding syntax here. Also sidenote: it's irrelevant to the solution. It's a carry over from OP's question.

shai_sharakanski · Accepted Answer · 2020-06-09 07:34:39Z

0

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

For Example:

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

answered Jun 9, 2020 at 7:34

shai_sharakanski

4172 silver badges14 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Option 1: Two-way binding to the `ngModel` directive

Option 2: Template reference variable

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Option 1: Two-way binding to the ngModel directive

Option 2: Template reference variable

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

Option 1: Two-way binding to the `ngModel` directive