Angular 15中如何根据条件禁用响应式表单的FormControl？

针对你升级Angular版本后表单控件禁用失效的问题，这里提供适配Angular 15及后续版本的响应式表单标准解决方案：

1. 初始化表单时设置控件初始禁用状态 #

在组件类中使用FormBuilder创建表单，给全名和邮箱控件默认设置禁用状态：

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

@Component({
  selector: 'app-student-form',
  templateUrl: './student-form.component.html',
  styleUrls: ['./student-form.component.css']
})
export class StudentFormComponent implements OnInit {
  studentForm: FormGroup;
  isStudentIdReal = false;

  constructor(private fb: FormBuilder) {
    // 初始化表单，全名和邮箱默认禁用
    this.studentForm = this.fb.group({
      studentId: [''],
      studentName: [{ value: '', disabled: true }],
      email: [{ value: '', disabled: true }]
    });
  }

2. 监听学生ID输入，切换控件状态 #

通过监听学生ID控件的内容变化，根据验证结果（是否存在对应记录）来启用/禁用全名和邮箱控件：

ngOnInit(): void {
    this.studentForm.get('studentId')?.valueChanges.subscribe(studentId => {
      // 替换为你的实际验证逻辑：比如调用API检查学生ID是否存在
      this.isStudentIdReal = this.validateStudentId(studentId);

      const nameControl = this.studentForm.get('studentName');
      const emailControl = this.studentForm.get('email');

      if (this.isStudentIdReal) {
        nameControl?.enable();
        emailControl?.enable();
      } else {
        nameControl?.disable();
        emailControl?.disable();
      }
    });
  }

  // 模拟学生ID验证逻辑，替换为你的业务代码
  private validateStudentId(id: string): boolean {
    return id && id.length >= 4; // 示例条件：ID长度≥4视为有效
  }
}

3. 模板中绑定表单控件 #

模板里直接绑定formControlName即可，无需额外设置[attr.disabled]，控件状态由FormControl实例统一管理：

<form [formGroup]="studentForm">
  <div>
    <label>学生ID：</label>
    <input type="text" formControlName="studentId" placeholder="输入学生ID">
  </div>
  <div>
    <label>全名：</label>
    <input type="text" formControlName="studentName" placeholder="输入全名">
  </div>
  <div>
    <label>邮箱：</label>
    <input type="email" formControlName="email" placeholder="输入邮箱">
  </div>
</form>

为什么旧方法失效？ #

Angular 14+对响应式表单的状态管理做了严格规范，直接通过[attr.disabled]操作DOM属性会和FormControl的内部状态冲突，导致控件状态不一致。官方推荐通过控件实例的enable()/disable()方法控制禁用状态，确保表单状态的统一性。

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