Angular FormGroup验证器不在FormControl上保留setError

在Angular中，FormGroup 和 FormControl 是表单验证的核心组件。FormControl 代表表单中的一个单独字段，而 FormGroup 则是一组 FormControl 的集合。验证器通常应用于这些控件上，以确保用户输入的数据符合预期的格式或条件。

基础概念

• FormControl: 表单中的一个字段，可以单独进行验证。
• FormGroup: 包含多个 FormControl 的容器，可以对其所有子控件应用验证器。
• Validator: 一个函数，用于检查 FormControl 或 FormGroup 的值是否有效，并返回错误对象或 null。

问题描述

当你在 FormGroup 上设置验证器时，有时可能会发现这些验证器没有正确地反映在单个 FormControl 上。这通常是因为验证器的应用方式不正确，或者是因为验证器的逻辑没有正确地处理 FormGroup 中的每个 FormControl。

原因分析

1. 验证器应用位置错误: 如果你在 FormGroup 上设置了验证器，但没有正确地将其应用到每个 FormControl 上，那么这些验证器可能不会按预期工作。
2. 自定义验证器逻辑问题: 如果你使用的是自定义验证器，可能是因为验证器的逻辑没有正确地处理 FormGroup 中的每个 FormControl。

解决方案

正确应用验证器

确保你在 FormGroup 上设置的验证器能够正确地影响到每个 FormControl。你可以使用 FormGroup 的 setValidators 方法来设置验证器，并确保这些验证器能够访问到每个 FormControl。

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

const formGroup = new FormGroup({
  name: new FormControl('', Validators.required),
  email: new FormControl('', [Validators.required, Validators.email])
});

// 设置一个自定义验证器，确保所有控件都不为空
formGroup.setValidators((group: FormGroup) => {
  const hasEmptyControl = Object.values(group.controls).some(control => control.errors?.required);
  return hasEmptyControl ? { 'allFieldsRequired': true } : null;
});

自定义验证器示例

如果你需要一个自定义验证器来检查所有字段是否都已填写，你可以这样写：

function allFieldsRequiredValidator(formGroup: FormGroup) {
  const hasEmptyControl = Object.values(formGroup.controls).some(control => control.errors?.required);
  return hasEmptyControl ? { 'allFieldsRequired': true } : null;
}

const formGroup = new FormGroup({
  name: new FormControl('', Validators.required),
  email: new FormControl('', [Validators.required, Validators.email])
}, { validators: allFieldsRequiredValidator });

应用场景

这种验证模式适用于需要确保表单中所有字段都已填写的场景，例如注册表单、登录表单等。

优势

• 集中管理验证逻辑: 在 FormGroup 级别设置验证器可以让你集中管理整个表单的验证逻辑。
• 提高代码复用性: 自定义验证器可以在多个表单之间复用。

通过上述方法，你可以确保 FormGroup 上的验证器能够正确地反映在每个 FormControl 上，从而提供更好的用户体验和更健壮的表单验证。