Angular响应式表单：遍历FormGroup时如何访问验证消息对象？

问题出在TypeScript的类型检查机制上：Object.keys()返回的是string[]类型，而你的validationMessages对象的键是特定的字符串字面量（比如'fullName'、'skillName'），TypeScript无法保证遍历到的key一定是validationMessages的有效键，所以直接索引会触发类型错误。

下面是两种可行的解决方法：

方法一：类型断言快速解决 #

在访问validationMessages[key]时，把key断言为validationMessages的键类型，明确告诉TypeScript这个键是有效的：

logValidationErrors(group: FormGroup): void {
  Object.keys(group.controls).forEach((key: string) => {
    const abstractControl = group.controls[key];
    if (abstractControl instanceof FormGroup) {
      this.logValidationErrors(abstractControl);
    } else {
      if (abstractControl && !abstractControl.valid && abstractControl.errors) {
        // 断言key为validationMessages的键类型
        const controlMessages = this.validationMessages[key as keyof typeof this.validationMessages];
        // 遍历控件的具体错误，获取对应消息
        Object.keys(abstractControl.errors).forEach(errorType => {
          const errorMessage = controlMessages[errorType];
          console.log(errorMessage);
          // 可将消息存入全局错误对象，供模板直接调用
        });
      }
    }
  });
}

方法二：类型守卫做安全检查 #

如果想更严谨，避免无效键导致的潜在问题，可以写一个类型守卫函数，先判断key是否存在于validationMessages中：

// 类型守卫函数，校验key是否为validationMessages的有效键
private isValidationKey(key: string): key is keyof typeof this.validationMessages {
  return key in this.validationMessages;
}

logValidationErrors(group: FormGroup): void {
  Object.keys(group.controls).forEach((key: string) => {
    const abstractControl = group.controls[key];
    if (abstractControl instanceof FormGroup) {
      this.logValidationErrors(abstractControl);
    } else {
      if (abstractControl && !abstractControl.valid && abstractControl.errors) {
        if (this.isValidationKey(key)) {
          const controlMessages = this.validationMessages[key];
          Object.keys(abstractControl.errors).forEach(errorType => {
            const errorMessage = controlMessages[errorType];
            console.log(errorMessage);
            // 存储错误消息到全局对象
          });
        }
      }
    }
  });
}

额外优化：统一存储错误消息 #

为了让模板无需修改就能直接显示错误，可以在组件内定义一个formErrors对象，遍历错误时将消息存入其中：

// 组件内定义存储错误的对象
formErrors: Record<string, string> = {};

logValidationErrors(group: FormGroup): void {
  Object.keys(group.controls).forEach((key: string) => {
    const abstractControl = group.controls[key];
    if (abstractControl instanceof FormGroup) {
      this.logValidationErrors(abstractControl);
    } else {
      // 清空该控件的旧错误
      this.formErrors[key] = '';
      if (abstractControl && !abstractControl.valid && abstractControl.errors) {
        if (this.isValidationKey(key)) {
          const controlMessages = this.validationMessages[key];
          // 取第一个错误类型对应的消息（也可拼接所有错误）
          const firstErrorType = Object.keys(abstractControl.errors)[0];
          this.formErrors[key] = controlMessages[firstErrorType];
        }
      }
    }
  });
}

之后模板里直接通过{{ formErrors.fullName }}就能显示对应错误消息，完全符合你“无需修改模板”的需求。

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