Angular12 ReactiveFormsModule复选框禁用状态渲染异常问题

问题原因 #

在ngOnChanges中直接替换this.form为新的FormGroup实例时，Angular的变更检测可能无法及时同步模板中表单控件的disabled状态，旧控件的状态绑定残留，导致显示与实际控件状态不符。

解决方案 #

方案1：不替换FormGroup实例，重置表单并更新状态 #

避免直接替换整个FormGroup，通过reset方法重置表单，再根据条件设置控件的禁用状态：

@Component({
  selector: "form-test",
  template: `
    <form [formGroup]="form">
      <input type="checkbox" formControlName="checkbox" />{{ item.name }}
      <p>form checkbox disabled: {{ form.get("checkbox").disabled }}</p>
    </form>
  `,
})
export class FormTestComponent implements OnChanges {
  @Input() item: any;

  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      name: [""],
      checkbox: [false],
    });
  }

  ngOnChanges(changes: SimpleChanges): void {
    // 重置表单值
    this.form.reset({
      name: "",
      checkbox: false,
    });

    // 先启用控件，再根据条件禁用
    this.form.get("checkbox")?.enable();
    if (this.item.name === 111) {
      this.form.get("checkbox")?.disable();
    }
  }
}

方案2：手动触发变更检测 #

若必须替换FormGroup实例，赋值后使用ChangeDetectorRef手动触发变更检测，确保模板同步更新：

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

@Component({
  selector: "form-test",
  template: `
    <form [formGroup]="form">
      <input type="checkbox" formControlName="checkbox" />{{ item.name }}
      <p>form checkbox disabled: {{ form.get("checkbox").disabled }}</p>
    </form>
  `,
})
export class FormTestComponent implements OnChanges {
  @Input() item: any;

  form: FormGroup;

  constructor(private fb: FormBuilder, private cdr: ChangeDetectorRef) {
    this.form = this.fb.group({});
  }

  ngOnChanges(changes: SimpleChanges): void {
    this.form = this.fb.group({
      name: [""],
      checkbox: [false],
    });

    if (this.item.name === 111) {
      this.form.get("checkbox")?.disable();
    }
    // 手动触发变更检测
    this.cdr.detectChanges();
  }
}

说明 #

方案1更符合Angular响应式表单的设计思路，避免频繁创建新的FormGroup实例，减少不必要的性能开销；方案2适用于必须替换FormGroup的场景，通过手动触发变更检测强制模板同步控件状态。

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