Angular 4中勾选复选框时启用输入字段的实现方法

在Angular 4里实现「复选框勾选后启用输入字段」这个需求其实很简单，我给你两种常用的实现方案，分别适配不同的场景：

这种方式不需要太多逻辑代码，直接在模板里通过双向绑定就能搞定。

首先在组件类里定义一个布尔变量，用来跟踪复选框的勾选状态：

import { Component } from '@angular/core';

@Component({
  selector: 'app-input-toggle',
  templateUrl: './input-toggle.component.html'
})
export class InputToggleComponent {
  // 默认状态：输入框禁用
  isInputEnabled = false;
}

然后在模板里绑定复选框和输入框的状态：

<div class="form-group">
  <label>
    <input type="checkbox" [(ngModel)]="isInputEnabled">
    勾选启用输入字段
  </label>
  <br>
  <!-- 通过!isInputEnabled来控制禁用状态：勾选时isInputEnabled为true，!isInputEnabled就是false，输入框启用 -->
  <input 
    type="text" 
    class="form-control" 
    placeholder="请输入内容..." 
    [disabled]="!isInputEnabled"
  >
</div>

这里的核心是[(ngModel)]双向绑定复选框的状态，再用[disabled]指令把输入框的禁用状态和这个变量关联起来，逻辑直观又好维护。

如果你的表单有较多控件、需要做验证或者更复杂的逻辑，用响应式表单会更灵活。

首先要确保你的模块（比如AppModule）已经导入了ReactiveFormsModule：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms'; // 导入响应式表单模块

import { InputToggleComponent } from './input-toggle.component';

@NgModule({
  imports: [BrowserModule, ReactiveFormsModule],
  declarations: [InputToggleComponent],
  bootstrap: [InputToggleComponent]
})
export class AppModule { }

接下来在组件类里创建表单组，监听复选框的变化来控制输入框的状态：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-input-toggle',
  templateUrl: './input-toggle.component.html'
})
export class InputToggleComponent implements OnInit {
  form: FormGroup;

  constructor(private fb: FormBuilder) { }

  ngOnInit(): void {
    // 初始化表单，输入框默认设置为禁用
    this.form = this.fb.group({
      enableInput: [false],
      inputField: [{ value: '', disabled: true }]
    });

    // 监听复选框的值变化
    this.form.get('enableInput')?.valueChanges.subscribe(checked => {
      const inputCtrl = this.form.get('inputField');
      // 根据勾选状态启用/禁用输入框
      checked ? inputCtrl?.enable() : inputCtrl?.disable();
    });
  }
}

对应的模板代码：

<form [formGroup]="form" class="form-group">
  <label>
    <input type="checkbox" formControlName="enableInput">
    勾选启用输入字段
  </label>
  <br>
  <input 
    type="text" 
    class="form-control" 
    placeholder="请输入内容..." 
    formControlName="inputField"
  >
</form>

这种方式通过表单控件的API（enable()/disable()）来控制状态，更符合Angular表单的设计思路，也方便后续扩展表单逻辑。

小提示：在Angular里尽量不要直接操作DOM元素的禁用状态，通过表单绑定或者控件API来控制才是最佳实践哦。

内容的提问来源于stack exchange，提问作者Ramana