Angular 14响应式表单如何选择性启用/禁用指定控件

你可以通过以下两种方式实现点击编辑按钮后，启用大部分控件但保留指定字段禁用的需求：

方法一：先全局启用，再单独禁用指定字段 #

在enableForm方法中，先调用enable()启用整个表单，再针对需要保持禁用的字段单独调用disable()，注意添加onlySelf: true参数避免影响表单整体状态：

enableForm() {
  // 启用所有表单控件
  this.myForm.enable();
  
  // 单独禁用指定字段，onlySelf: true 确保只修改当前控件状态，不影响父表单
  this.myForm.get('leName')?.disable({ onlySelf: true });
  this.myForm.get('leNumberStartDate')?.disable({ onlySelf: true });
  // 如有更多需要禁用的字段，继续添加上述代码
}

方法二：遍历控件，仅启用非指定字段 #

如果需要排除的字段较多，可以先定义禁用字段列表，再遍历表单控件只启用不在列表中的字段：

// 提前定义需要保持禁用的字段集合
private readonly disabledFieldList = ['leName', 'leNumberStartDate'];

enableForm() {
  // 遍历所有表单控件
  Object.keys(this.myForm.controls).forEach(fieldKey => {
    if (!this.disabledFieldList.includes(fieldKey)) {
      // 仅启用不在禁用列表中的字段
      this.myForm.get(fieldKey)?.enable();
    }
  });
}

关键说明 #

• 使用onlySelf: true是因为默认情况下，控件的禁用状态会向上传递给父FormGroup，导致整个表单回到禁用状态，添加该参数可以避免这个问题。
• 两种方法都能满足需求，可根据需要禁用的字段数量选择：字段少用方法一，字段多用方法二更高效。

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