Angular表单组控件错误提示不显示问题求助

问题出在你对表单组errors属性的理解上：表单组的errors只存储针对组本身的验证器错误，而你把Validators.required加在了组内的单个FormControl上，所以formulario.controls['facturasBN'].errors始终是null，自然不会触发错误提示。

下面给你两种可行的解决思路：

方法一：手动检查组内控件的有效性 #

在组件类里添加一个getter方法，专门判断facturasBN组内是否有无效且已交互过的控件：

// 在FormularioFacturaComponent类中添加
get hasFacturasBNErrors(): boolean {
  const facturasBNGroup = this.formulario.get('facturasBN') as FormGroup;
  // 检查组内是否存在：无效 且 (已触摸 或 表单已提交) 的控件
  return Object.values(facturasBNGroup.controls).some(control => 
    control.invalid && (control.touched || this.formulario.submitted)
  );
}

然后在模板里修改错误提示组件的绑定：

<app-field-error-display 
  [displayError]="hasFacturasBNErrors" 
  errorMsg="the fields marked in red are obligatory"
></app-field-error-display>

这种方式的好处是不需要修改表单结构，直接通过逻辑判断组内控件状态。

方法二：给表单组添加自定义验证器 #

给facturasBN组添加一个自定义验证器，让组本身能检测到内部控件的错误：

首先修改组件的createForm方法，添加组级验证器：

createForm() {
  // 先创建子表单组并添加验证器
  const facturasBNGroup = this.formBuilder.group({
    lectura: new FormControl('0', [Validators.required]),
    copias: new FormControl('0', [Validators.required]),
    descuento: new FormControl('0', [Validators.required])
  }, { 
    validators: this.groupHasInvalidControlsValidator // 组级验证器
  });

  this.formulario = this.formBuilder.group({
    facturasBN: facturasBNGroup,
    pcIVA: this.pcIVA,
  });
}

// 自定义组验证器方法
private groupHasInvalidControlsValidator(group: FormGroup): ValidationErrors | null {
  // 检查组内是否有无效控件
  const hasInvalid = Object.values(group.controls).some(control => control.invalid);
  return hasInvalid ? { groupHasErrors: true } : null;
}

然后在模板里修改绑定，检测组的自定义错误：

<app-field-error-display 
  [displayError]="formulario.get('facturasBN')?.hasError('groupHasErrors')" 
  errorMsg="the fields marked in red are obligatory"
></app-field-error-display>

这种方式更符合Angular表单的验证逻辑，把错误检测封装在表单组本身。

额外提示 #

为了提升用户体验，建议在错误判断中加入control.touched或formulario.submitted的条件，避免页面刚加载时就显示错误提示，只有当用户触摸过控件或提交过表单后才展示错误。

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