Angular：如何通过单击复选框来启用和禁用文本框？

我正在使用 Angular 和 TypeScript，并尝试使用复选框启用/禁用文本框。

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

尽量避免直接修改 DOMdocument.getElementById在角度。您可以使用其他选项达到相同的效果。

选项 1：双向绑定ngModel指示

控制器

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

Template

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

我们到了双向绑定变量的复选框值checkboxStatus使用ngModel指示。

选项 2：模板引用变量

Template

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

Here a 模板引用变量 inputCheck用于引用 DOM 中的复选框。后来是财产checked绑定到文本输入属性disabled动态设置它的值。