如何单击复选框以启用和禁用带有角的html中的文本框 [英] how to click checkbox to enable and disable textbox in html with angular

问题描述

请问一个问题.我是带有角度的代码，请尝试使用复选框启用输入文本框

通过进行此操作的功能位于app.component.ts中如果已选中复选框，则启用文本框，而取消选中文本框，则禁用

app.componen.html

 <输入type ="checkbox" value ="true"(click)="check_en(value)"><输入类型="text" id ="text1"已禁用> 

app.component.ts

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

谢谢

解决方案

尝试避免直接使用Angular中的 document.getElementById 修改DOM.您可以使用其他选项达到相同的效果.

选项1:双向绑定到 ngModel 指令

控制器

 导出类AppComponent {checkboxStatus:任意；...} 

模板

 < input type =" checkbox"[(ngModel)] ="checkboxStatus"；(click)="check_en(value)"<输入类型=文本"；id ="text1"[disabled] =！checkboxStatus" 

在这里，我们双向绑定使用 < input #inputCheck type =" checkbox"(click)="check_en(value)"<输入类型=文本"；id ="text1"[disabled] =！inputCheck.checked"

在这里模板参考变量 inputCheck用于引用DOM中的复选框.稍后将其属性 checked 绑定到文本输入属性 disabled 来动态设置其值.

May i asked some quetion. I am code with angular try use checkbox for enable input textbox

by fucntion for this action is in app.component.ts if checkbox is checked textbox is enable and uncheck textbox is disable

app.componen.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")    
    }    

}

thanks

解决方案

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.

这篇关于如何单击复选框以启用和禁用带有角的html中的文本框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！