How to get Angular checkbox value to enable textbox

Sun, Mar 22, 2020

Read in 1 minutes

In this article, we will explore how to enable a textbox based on the checkbox value.

Textbox enabled on click of a checkbox checkboxdemo

app.component.html

<label>click the checkbox to enable the text box::</label>
<div style="display:inline-flex">
  <div   *ngFor="let day of days;let i=index;" >
        {{day}}
      <input  type="checkbox" #chk   (change) = onChange(i,chk) ngModel name={{day}}>
        <input type="text"    style="width:49px;display:grid;" name={{day}} [disabled]="!chk.checked">
  </div>
</div>

Here the “#chk” is the reference value for the checkbox. [disabled] condition helps to make the text box by default disabled and after the change event triggered from the checkbox, the textbox will get enabled

app.component.ts

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-checkboxdemo',
  templateUrl: './checkboxdemo.component.html',
  styleUrls: ['./checkboxdemo.component.css']
})
export class CheckboxdemoComponent implements OnInit {
  days=[0,1,2,3,4,5,6];
  constructor() { }
  ngOnInit() {
  }
  onChange(v,e){
    console.log("v"+v);
    console.log("e"+e);
  }
}