在Angular中，可以通过自定义验证器来实现当表单组有验证错误时，表单控件无效的功能。以下是一个示例：

首先，创建一个自定义验证器函数，用于检查表单组是否有验证错误。该函数将遍历表单组中的所有控件，并返回一个布尔值，指示是否存在验证错误。

import { AbstractControl, ValidatorFn } from '@angular/forms';

export function validateFormControls(): ValidatorFn {
  return (control: AbstractControl): { [key: string]: any } | null => {
    // 检查表单组是否有验证错误
    if (control instanceof FormGroup && control.errors) {
      const controls = control.controls;
      for (const controlName in controls) {
        if (controls[controlName].errors) {
          return { 'formError': true };
        }
      }
    }

    return null;
  };
}

接下来，在使用该自定义验证器的表单组中，添加一个表单控件来监听整个表单组的验证状态。当表单组有验证错误时，该控件会自动设置为无效。

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { validateFormControls } from './custom-validators';

@Component({
  selector: 'app-my-form',
  template: `
    

      

        
        
      
    
  `,
  styles: [`
    .invalid {
      border: 2px solid red;
    }
  `]
})
export class MyFormComponent {
  form: FormGroup;

  constructor(private formBuilder: FormBuilder) {
    this.form = this.formBuilder.group({
      group: this.formBuilder.group({
        control1: ['', Validators.required],
        control2: ['', Validators.required]
      }, { validator: validateFormControls() })
    });
  }
}

在上面的示例中，我们创建了一个名为group的表单组，并将自定义验证器函数validateFormControls应用于该表单组。在模板中，我们使用了[ngClass]指令来根据表单组的验证状态动态设置样式。

通过以上的代码，当表单组中任一表单控件有验证错误时，group表单控件会被设置为无效，并应用红色边框样式。这样就实现了当表单组有验证错误时，表单控件无效的功能。