Angular响应式表单多复选框FormArray的touched属性始终为false问题

安全阿岳

2026-9-23

问题根因

Angular响应式表单的touched状态默认仅在绑定该表单控件的DOM元素触发blur（失去焦点）事件时才会被标记为true。你当前的实现中，所有颜色复选框并未直接绑定到colors对应的FormArray实例，仅通过自定义的onCheckChange方法手动修改FormArray的取值，没有任何交互行为会触发FormArray的touched状态更新，因此它始终为false，错误提示自然无法触发。

修复方案

最小改动方案

直接在onCheckChange方法中新增一行代码，手动将colors表单控件标记为已触碰即可，修改后的代码如下：

onCheckChange(event) {
  const formArray: FormArray = this.form.get('colors') as FormArray;
  // 新增代码：用户操作复选框后手动标记控件为已触碰
  this.form.get('colors')?.markAsTouched();

  if (event.target.checked) {
    formArray.push(new FormControl(event.target.value));
  } else {
    let i: number = 0;
    formArray.controls.forEach((ctrl: FormControl) => {
      if (ctrl.value == event.target.value) {
        formArray.removeAt(i);
        return;
      }
      i++;
    });
  }
}

修改后只要用户点击过任意颜色复选框，colors的touched就会变为true，当用户全部取消勾选时，Validators.required校验不通过，错误提示会正常展示。