如何根据复选框选择启用FormControl？Angular表单控件只读转可编辑代码失效问题

我看到你遇到的问题啦——你想用复选框切换Proposedtude这个FormControl的可编辑状态，但当前的TypeScript代码没生效，核心问题出在这里：

你用了.enabled这个属性，它只是一个只读属性，用来检查控件是否处于启用状态，并不能修改控件的启用/禁用状态。要实现状态切换，我们需要用FormControl提供的enable()和disable()方法。

下面是具体的修正方案：

1. 修正复选框的事件处理代码 #

把你的事件处理逻辑改成这样：

// 假设你的复选框事件绑定的是这个方法
onToggleEdit(event: Event) {
  const proposedtudeControl = this.site.controls['Proposedtude'];
  const isChecked = (event.target as HTMLInputElement).checked;
  
  if (isChecked) {
    proposedtudeControl.enable(); // 启用控件，允许编辑
  } else {
    proposedtudeControl.disable(); // 禁用控件，回到不可编辑状态
  }
}

2. 优化HTML代码（可选但推荐） #

你原来的input标签里加了readonly="true"，其实可以去掉它。因为当FormControl被禁用时，Angular会自动给input元素添加disabled属性，浏览器会默认让它处于不可编辑状态，这样表单的状态和DOM状态就能统一维护，不需要手动管理readonly：

<input matInput id="Proposedtude" formControlName="Proposedtude" placeholder="Enter Proposed tude" type="text" required />

3. 初始化表单时设置初始状态 #

记得在表单初始化的时候，把Proposedtude控件设置为禁用状态，对应你一开始想要的只读效果：

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

// 组件类里的代码
constructor(private formBuilder: FormBuilder) {}

ngOnInit(): void {
  this.site = this.formBuilder.group({
    // 用{value: '', disabled: true}初始化，设置初始禁用状态
    Proposedtude: [{ value: '', disabled: true }, Validators.required]
  });
}

这样调整后，当复选框选中时，控件会变成可编辑；取消选中时，又会回到不可编辑状态，完全符合你的需求~

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