Angular9表单条件必填触发ExpressionChangedAfterItHasBeenCheckedError如何解决

问题原因 #

这个ExpressionChangedAfterItHasBeenCheckedError是Angular开发模式下的专属校验报错，本质是同一轮变更检测周期内，先计算了ID输入框的required状态，之后单选按钮的ngModel更新又修改了registration.saCitizen的值，导致同一轮检测里同一个表达式返回的结果前后不一致，触发了Angular的变更一致性校验。

可行解决方案（均保留原有条件必填逻辑） #

方案1：添加change事件手动触发变更检测（改造成本最低） #

1. 组件类注入ChangeDetectorRef并定义触发方法：

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

@Component({
  // 你的原有组件配置
})
export class YourComponent {
  registration = {
    saCitizen: null,
    idNumber: ''
  };

  constructor(private cdr: ChangeDetectorRef) {}

  onCitizenChange() {
    this.cdr.detectChanges();
  }
}

2. 给两个单选按钮都绑定change事件：

<input class="form-check-input" type="radio" name="saCitizen" id="saCitizen_yes" [value]="true" [(ngModel)]="registration.saCitizen" required #saCitizen="ngModel" (change)="onCitizenChange()">

<input class="form-check-input" type="radio" name="saCitizen" id="saCitizen_no" [value]="false" [(ngModel)]="registration.saCitizen" required (change)="onCitizenChange()">

方案2：异步更新必填状态（零注入依赖，简单粗暴） #

将必填状态的更新放到下一个事件循环，避开当前变更检测周期：

1. 组件中定义异步更新逻辑：

isIdRequired = false;

onCitizenChange() {
  setTimeout(() => {
    this.isIdRequired = this.registration.saCitizen;
  }, 0);
}

2. 修改ID输入框的required绑定：

<input id="idNumber" name="idNumber" class="form-control" type="text" [(ngModel)]="registration.idNumber" #idNumber="ngModel" maxlength="13" minlength="13" pattern="^\d{13}$" [required]="isIdRequired" />

方案3：改用响应式表单（最规范，从根源避免问题） #

模板驱动表单的动态校验本身容易触发变更检测冲突，改用响应式表单可完全自主控制校验逻辑：

1. 组件中定义响应式表单及监听逻辑：

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

@Component({
  // 你的原有组件配置
})
export class YourComponent {
  registerForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.registerForm = this.fb.group({
      saCitizen: [null, Validators.required],
      idNumber: ['']
    });

    // 监听公民身份选项变化，动态调整ID的校验规则
    this.registerForm.get('saCitizen')!.valueChanges.subscribe(val => {
      const idControl = this.registerForm.get('idNumber')!;
      if (val) {
        idControl.setValidators([Validators.required, Validators.minLength(13), Validators.maxLength(13), Validators.pattern(/^\d{13}$/)]);
      } else {
        idControl.clearValidators();
      }
      idControl.updateValueAndValidity();
    });
  }
}

2. 模板改为响应式表单绑定：

<!-- 单选按钮部分 -->
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="saCitizen" id="saCitizen_yes" [value]="true" formControlName="saCitizen">
  <label class="form-check-label" for="saCitizen_yes">Yes</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="saCitizen" id="saCitizen_no" [value]="false" formControlName="saCitizen">
  <label class="form-check-label" for="saCitizen_no">No</label>
</div>

<!-- ID输入框部分 -->
<input id="idNumber" name="idNumber" class="form-control" type="text" formControlName="idNumber">
<div *ngIf="registerForm.get('idNumber')?.errors?.required" class="invalid-feedback">
  RSA ID Number is required
</div>

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