如何在Angular 5应用的组件中禁用输入框？

嘿，我看到你现在在Angular 5里用响应式表单，想实现勾选复选框时禁用对应输入框的功能。首先得提醒你：直接通过document.getElementById操作DOM可不是Angular的最佳实践，响应式表单本身就提供了更优雅的方式来控制控件状态，完全不需要手动操作DOM元素~

正确的实现思路：利用响应式表单的控件API #

因为你已经用了formControlName绑定输入框，每个输入框都对应FormGroup里的一个FormControl实例。我们只需要通过表单组获取到对应的控件，调用它的disable()或enable()方法就能控制禁用状态，Angular会自动把这个状态同步到模板的输入框上。

修改你的组件代码 #

假设你的组件里已经定义了一个FormGroup实例（比如叫questionForm），可以把handleQuestionAnswerProvidedStateChange方法改成这样：

private handleQuestionAnswerProvidedStateChange(questionAnswerProvidedState: QuestionAnswerProvidedStateDataModel) {
  // 通过表单组获取对应的FormControl
  const targetControl = this.questionForm.get(questionAnswerProvidedState.QuestionId);
  
  if (targetControl) {
    // 根据复选框的状态来决定禁用还是启用（这里假设你的状态数据里有isChecked字段，根据实际情况调整）
    if (questionAnswerProvidedState.isChecked) {
      targetControl.disable();
    } else {
      targetControl.enable();
    }
  }
}

模板端的配合（如果还没绑定复选框事件） #

循环生成的复选框可以绑定change事件，把对应的问题ID和勾选状态传递给处理方法：

<!-- 假设这是你的复选框模板，放在循环里 -->
<input type="checkbox" 
       [id]="'checkbox-' + question.key"
       (change)="handleQuestionAnswerProvidedStateChange({
         QuestionId: question.key,
         isChecked: $event.target.checked
       })"
>
<label [for]="'checkbox-' + question.key">{{question.label}}</label>

为什么不推荐操作DOM？ #

• Angular的变更检测机制会自动管理表单控件的状态，手动操作DOM可能导致状态不同步
• 循环生成的元素用表单控件的方式更可靠，不会因为DOM结构变化导致获取不到元素
• 响应式表单的API是Angular官方推荐的方式，代码更易维护和测试

内容的提问来源于stack exchange，提问作者K.Z